그누보드 5 (Gnuboard5) 플러그인

한국 최고의 게시판 솔루션인 그누보드5에 맞춤 제작된 전용 플러그인입니다. 관리자 페이지에서 클릭 한 번으로 기본 에디터를 아사미야 에디터로 변경할 수 있습니다.

설치 및 적용 방법

1. 위의 다운로드 버튼을 눌러 압축파일을 받습니다.
2. 압축을 풀면 나오는 `asamiya` 폴더를 복사합니다.
3. 그누보드가 설치된 서버의 `plugin/editor/` 경로 안에 `asamiya` 폴더를 통째로 업로드합니다.
   (경로 예시: /www/plugin/editor/asamiya/)
4. 최고 관리자 아이디로 그누보드 관리자 페이지에 로그인합니다.
5. [환경설정] -> [기본환경설정] 메뉴로 이동합니다.
6. 에디터 선택 항목에서 셀렉트박스를 열고 `asamiya`를 선택한 후 저장합니다.
7. 이제 모든 게시판의 글쓰기 화면에서 아사미야 에디터가 예쁘게 출력됩니다! 🎉

※ 내부적으로 editor.lib.php가 완벽하게 구현되어 있어 폼 전송 시 자동으로 본문 내용이 `wr_content` DB 필드로 저장됩니다.

라라벨 (Laravel) 연동 가이드

라라벨의 Blade 템플릿 엔진과 컨트롤러를 활용하여 에디터를 부착하고 데이터베이스에 저장하는 방법입니다.

1. Blade 템플릿 폼 작성 (resources/views/create.blade.php)

<form action="{{ route('post.store') }}" method="POST" id="postForm">
    @csrf
    <!-- 제목 -->
    <input type="text" name="title" placeholder="제목">
    
    <!-- 아사미야 에디터 영역 -->
    <input type="hidden" name="content" id="content">
    <div id="editor-container"></div>

    <button type="submit">저장하기</button>
</form>

<!-- 스크립트 연결 -->
<script src="{{ asset('assets/asamiya-editor.js') }}"></script>
<script>
    const editor = new AsamiyaEditor('#editor-container');
    
    document.getElementById('postForm').addEventListener('submit', function() {
        document.getElementById('content').value = editor.getHTML();
    });
</script>

2. 컨트롤러에서 수신 및 저장 (PostController.php)

public function store(Request $request)
{
    // 데이터 유효성 검사
    $request->validate([
        'title' => 'required',
        'content' => 'required'
    ]);

    // DB에 HTML 내용 그대로 저장
    Post::create([
        'title' => $request->title,
        'content' => $request->content // 에디터에서 전송된 HTML
    ]);

    return redirect()->route('post.index');
}

3. 글 수정 모드에서 기존 내용 불러오기 (edit.blade.php)

<script>
    const editor = new AsamiyaEditor('#editor-container');
    
    // 블레이드의 unescaped 태그 {!! !!} 를 사용하여 HTML 문자열을 그대로 JS에 전달
    const savedContent = `{!! addslashes($post->content) !!}`;
    editor.setHTML(savedContent);
</script>

장고 (Django) 연동 가이드

파이썬 장고 프레임워크의 Jinja 템플릿에서 에디터를 사용하는 방법입니다.

1. 템플릿 폼 작성 (post_form.html)

<form method="POST" id="postForm">
    {% csrf_token %}
    <input type="text" name="title" placeholder="Title">
    
    <!-- 에디터 데이터 전송용 Hidden Input -->
    <input type="hidden" name="content" id="content">
    <div id="editor-container"></div>

    <button type="submit">Submit</button>
</form>

<script src="{% static 'js/asamiya-editor.js' %}"></script>
<script>
    const editor = new AsamiyaEditor('#editor-container');
    
    document.getElementById('postForm').addEventListener('submit', function() {
        document.getElementById('content').value = editor.getHTML();
    });
    
    // 수정 페이지일 경우 기존 데이터 불러오기 (safe 필터 필수)
    {% if post.content %}
    editor.setHTML(`{{ post.content|safe|escapejs }}`);
    {% endif %}
</script>

2. View에서 데이터 처리 (views.py)

def post_create(request):
    if request.method == "POST":
        title = request.POST.get('title')
        content = request.POST.get('content') # 에디터 HTML 내용
        
        # 모델에 저장
        Post.objects.create(title=title, content=content)
        return redirect('post_list')
        
    return render(request, 'post_form.html')

워드프레스 (WordPress) 연동 가이드

워드프레스의 기본 에디터를 대체하는 정식 플러그인은 현재 PRO 버전(개발 중)과 함께 배포를 준비하고 있습니다. 하지만 테마의 functions.php를 수정하여 수동으로 숏코드를 만들어 사용할 수 있습니다.

functions.php를 이용한 커스텀 에디터 숏코드 생성

사용 중인 테마의 functions.php 최하단에 아래 코드를 추가하면 [asamiya_editor] 숏코드를 통해 프론트엔드 글쓰기 페이지에 에디터를 띄울 수 있습니다.

function load_asamiya_editor_assets() {
    // 에셋 파일이 테마 폴더 안의 assets/ 폴더에 있다고 가정
    wp_enqueue_style('asamiya-style', get_template_directory_uri() . '/assets/asamiya-editor.css');
    wp_enqueue_script('asamiya-script', get_template_directory_uri() . '/assets/asamiya-editor.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_asamiya_editor_assets');

function asamiya_editor_shortcode() {
    ob_start(); ?>
    <div id="editor-container"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var editor = new AsamiyaEditor('#editor-container');
        });
    </script>
    <?php return ob_get_clean();
}
add_shortcode('asamiya_editor', 'asamiya_editor_shortcode');

※ 정식 플러그인(Zip 패키지)이 출시되면 플러그인 메뉴에서 클릭 한 번으로 설치 가능하도록 업데이트될 예정입니다!