xEditor Classic

주요 기능

✏️

풍부한 편집 기능

글꼴, 크기, 색상, 정렬 등 다양한 텍스트 편집 기능을 제공합니다. 들여쓰기/내어쓰기 기능도 완벽 지원합니다.

🖼️

미디어 지원

이미지 업로드, 드래그&드롭, 크기 조절, 동영상 삽입 등 멀티미디어 콘텐츠를 쉽게 관리할 수 있습니다.

🔧

쉬운 통합

그누보드, 워드프레스, XE 등 다양한 CMS와 쉽게 통합할 수 있습니다. 단 몇 줄의 코드로 설치 가능!

📱

반응형 디자인

모바일, 태블릿, 데스크톱 모든 기기에서 완벽하게 작동합니다. 터치 인터페이스도 지원합니다.

🚀

빠른 성능

최적화된 코드로 빠른 로딩과 부드러운 편집 경험을 제공합니다. 대용량 문서도 문제없이 처리합니다.

🛡️

보안 강화

XSS 공격 방지를 위한 콘텐츠 필터링과 안전한 HTML 처리를 지원합니다.

설치 방법

기본 설치 방법

파일 다운로드 및 압축 해제

다운로드한 ZIP 파일을 웹사이트 디렉토리에 압축 해제합니다.

HTML에 CSS와 JS 파일 포함

<!-- CSS 파일 -->
<link rel="stylesheet" href="path/to/xeditor.min.css">

<!-- JS 파일 (body 태그 끝나기 전에) -->
<script src="path/to/xeditor.min.js"></script>

에디터 초기화

<!-- 에디터가 들어갈 컨테이너 -->
<div id="myEditor"></div>

<script>
// 에디터 초기화
const editor = new xEditor({
    container: '#myEditor',
    height: '400px',
    toolbar: {
        items: [
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'fontFamily', 'fontSize', '|',
            'textColor', 'backgroundColor', '|',
            'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
            'orderedList', 'unorderedList', 'indent', 'outdent', '|',
            'link', 'image', 'table', '|',
            'undo', 'redo'
        ]
    }
});

// 콘텐츠 가져오기
function getContent() {
    const content = editor.getContent();
    console.log(content);
}

// 콘텐츠 설정하기
function setContent(html) {
    editor.setContent(html);
}
</script>

그누보드 5 설치 방법

xEditor 파일 업로드

다운로드한 파일을 /plugin/editor/xeditor/ 디렉토리에 업로드합니다.

에디터 설정 파일 수정

/plugin/editor/xeditor/config.php 파일을 생성합니다:

<?php
if (!defined('_GNUBOARD_')) exit;

// xEditor 설정
function editor_html($id, $content, $is_dhtml_editor=true)
{
    global $g5, $config, $board;
    
    $editor_url = G5_PLUGIN_URL.'/editor/xeditor';
    
    $html = "";
    $html .= "<link rel=\"stylesheet\" href=\"{$editor_url}/xeditor.min.css\">\n";
    $html .= "<script src=\"{$editor_url}/xeditor.min.js\"></script>\n";
    $html .= "<div id=\"{$id}_editor\">{$content}</div>\n";
    $html .= "<textarea id=\"{$id}\" name=\"{$id}\" style=\"display:none;\">{$content}</textarea>\n";
    $html .= "<script>\n";
    $html .= "var {$id}_editor = new xEditor({\n";
    $html .= "    container: '#{$id}_editor',\n";
    $html .= "    height: '350px'\n";
    $html .= "});\n";
    $html .= "\n";
    $html .= "// 폼 전송 시 에디터 내용을 textarea에 복사\n";
    $html .= "$(document).on('submit', 'form', function() {\n";
    $html .= "    $('#{$id}').val({$id}_editor.getContent());\n";
    $html .= "});\n";
    $html .= "</script>\n";
    
    return $html;
}
?>

그누보드 관리자에서 에디터 선택

관리자 페이지 → 환경설정 → 기본환경설정에서 에디터를 'xeditor'로 변경합니다.

✅ 설치가 완료되었습니다! 게시판에서 xEditor를 사용할 수 있습니다.

워드프레스 설치 방법

플러그인 디렉토리에 업로드

/wp-content/plugins/xeditor-classic/ 디렉토리를 생성하고 파일을 업로드합니다.

플러그인 파일 생성

xeditor-classic.php 파일을 생성합니다:

<?php
/**
 * Plugin Name: xEditor Classic
 * Description: 강력한 한국형 WYSIWYG 에디터
 * Version: 1.0.0
 * Author: xEditor Team
 */

// 에디터 스크립트 등록
add_action('admin_enqueue_scripts', 'xeditor_enqueue_scripts');
function xeditor_enqueue_scripts($hook) {
    if ($hook == 'post.php' || $hook == 'post-new.php') {
        wp_enqueue_style('xeditor-css', plugin_dir_url(__FILE__) . 'xeditor.min.css');
        wp_enqueue_script('xeditor-js', plugin_dir_url(__FILE__) . 'xeditor.min.js', array(), '1.0.0', true);
        wp_enqueue_script('xeditor-init', plugin_dir_url(__FILE__) . 'init.js', array('xeditor-js'), '1.0.0', true);
    }
}
?>

플러그인 활성화

워드프레스 관리자 → 플러그인에서 'xEditor Classic'을 활성화합니다.

XE/라이믹스 설치 방법

에디터 모듈 업로드

/modules/editor/skins/xeditor/ 디렉토리에 파일을 업로드합니다.

스킨 정보 파일 생성

skin.xml 파일을 생성합니다:

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
    <title xml:lang="ko">xEditor Classic</title>
    <description xml:lang="ko">강력한 한국형 WYSIWYG 에디터</description>
    <version>1.0.0</version>
    <date>2025-01-10</date>
    <author email="admin@xenix.net" link="https://xenix.net">
        <name xml:lang="ko">xEditor Team</name>
    </author>
</skin>

관리자에서 에디터 스킨 변경

관리자 페이지 → 설정 → 에디터 설정에서 'xEditor Classic'을 선택합니다.

CDN으로 사용하기

다운로드 없이 CDN을 통해 바로 사용할 수 있습니다:

<!-- CSS -->
<link rel="stylesheet" href="https://xenix.net/xedit_classic/xeditor.min.css">

<!-- JavaScript -->
<script src="https://xenix.net/xedit_classic/xeditor.min.js"></script>

<!-- 사용 예제 -->
<div id="editor"></div>
<script>
const editor = new xEditor({
    container: '#editor',
    height: '400px'
});
</script>

주요 옵션

const editor = new xEditor({
    container: '#editor',          // 필수: 에디터 컨테이너 선택자
    height: '400px',              // 높이 (기본값: 400px)
    width: '100%',                // 너비 (기본값: 100%)
    language: 'ko',               // 언어 (기본값: ko)
    placeholder: '내용을 입력하세요', // 플레이스홀더
    theme: 'light',               // 테마: light/dark
    autoSave: {                   // 자동 저장 설정
        enabled: true,
        interval: 30000           // 30초마다 자동 저장
    },
    toolbar: {
        position: 'top',          // 툴바 위치: top/bottom/floating
        sticky: true,             // 스크롤 시 툴바 고정
        items: [                  // 툴바 아이템 커스터마이징
            'bold', 'italic', 'underline', '|',
            'fontFamily', 'fontSize', '|',
            'textColor', 'backgroundColor', '|',
            'alignLeft', 'alignCenter', 'alignRight', '|',
            'orderedList', 'unorderedList', '|',
            'indent', 'outdent', '|',
            'link', 'image', 'table', '|',
            'undo', 'redo', '|',
            'fullscreen'
        ]
    }
});

⚠️ 주의사항: xEditor Classic은 Internet Explorer 11 이상에서 작동합니다. 최적의 성능을 위해 최신 브라우저 사용을 권장합니다.

주요 기능

풍부한 편집 기능

미디어 지원

쉬운 통합

반응형 디자인

빠른 성능

보안 강화

실시간 데모 체험

데모에서 체험할 수 있는 기능:

오픈소스 프로젝트

GitHub에서 만나보세요

다운로드

전체 패키지

CDN 사용