Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 17 Next »

1. 다운로드

2. 사전준비

  1. 사이냅에디터 워드프레스 플러그인을 다운로드 합니다.
  2. 사이냅에디터 파일을 준비합니다.
    • synapeditor.min.js (필수)
    • synapeditor.min.css (필수)
    • license.json (필수)
    • synapeditor.config.js (선택)
    • sedocConverter (선택)
  3. 압축을 풀고 파일들(synapeditor.min.js, synapeditor.min.css, synapeditor.config.js)을 resource폴더에 넣어줍니다.
  4. 실행파일(sedocConverter)이 있는 경우 resource/sedocConverter폴더에 넣어줍니다.

3. 적용하기

  1. 라이센스 파일(license.json)을 resource폴더에 넣어줍니다.
  2. resource/synapeditor.config.js 파일을 수정 합니다. 아래 항목은 워드프레스 플러그인 적용시 필수 수정 항목입니다.

    /synapeditor_plugin/resource/synapeditor.config.js
    var synapEditorConfig = {
      "editor.license": "http://localhost/wordpress/wp-content/plugins/synapeditor/resource/license.json",
      "editor.import.api": "admin-ajax.php",
      "editor.import.param": {"action": "import_doc"},
      "editor.upload.image.api": "admin-ajax.php",
      "editor.upload.image.param": {"action": "upload_file"},
      "editor.upload.video.api": "admin-ajax.php",
      "editor.upload.video.param": {"action": "upload_file"},
      "editor.upload.file.api": "admin-ajax.php",
      "editor.upload.file.param": {"action": "upload_file"},
       ...
    }
  3. wordpress_plugin 폴더 전체를 복사하여 "\wordpress\wp-content\plugins\"에 넣어줍니다.


4. 소스코드

/synapeditor_plugin/index.php
<?php
/*
Plugin Name: synapeditor
Plugin URI: http://www.synapeditor.com
Description: Unlimited Rich Text Editor
Version: 0.1
Author: synapsoft
Author URI: http://www.synapsoft.co.kr
License: GPL 2
*/

/*
 * remove current editor
 */
function wp_remove_editor() {
    remove_post_type_support( 'post', 'editor' );
}

/*
 * add Synap Editor
 */
function wp_add_synapeditor() {
    wp_enqueue_script('synapeditor', plugin_dir_url(__FILE__) . 'resource/synapeditor.js', array( 'jquery' ));
    wp_enqueue_script('synapeditorConfig', plugin_dir_url(__FILE__) . 'resource/synapeditor.config.js');
    wp_enqueue_style('synapeditor',  plugin_dir_url(__FILE__) . 'resource/synapeditor.min.css');

    $post = get_post(get_the_ID());
    $content = apply_filters('the_content', $post->post_content);

    echo "<textarea id=\"content\" name=\"content\" style=\"display: none;\">$content</textarea>" ;
    echo "<script>";
    echo "window.onload = function () {";
    echo "var html = document.getElementById('content').innerText;";
    echo "window.editor = new SynapEditor('content', synapEditorConfig, html);";
    echo "}";
    echo "</script>";
}
add_action('init' ,'wp_remove_editor');
add_action('edit_form_after_title', 'wp_add_synapeditor' );


/*
 * upload file
 */
function upload_file()
{
    $response = array();
    $uploaded_file = wp_handle_upload($_FILES['file'], array('test_form' => false));
    if ($uploaded_file && !isset( $uploaded_file['error'] )) {
        $response['uploadPath'] = parse_url($uploaded_file['url'])['path'];
    }

    echo json_encode($response);
    die();
};
add_action( 'wp_ajax_upload_file', 'upload_file' );
add_action( 'wp_ajax_nopriv_upload_file', 'upload_file' );

/*
 * import document
 */
function import_doc()
{
    $response = array();
    $uploaded_file = wp_handle_upload($_FILES['file'], array('test_form' => false));
    if ($uploaded_file && !isset( $uploaded_file['error'] )) {
        $uploadDir = wp_upload_dir();
        $path_parts = pathinfo($uploaded_file['file']);
        $uploadFileName = $path_parts['filename'];

        // convert document
        $outputFilePath = join(DIRECTORY_SEPARATOR, array($uploadDir['path'], $uploadFileName));
        executeConverter($uploaded_file['file'], $outputFilePath);

        // serialized datas
		// v2.3.0 부터 파일명이 document.word.pb에서 document.pb로 변경됨
        $pbFilePath = join(DIRECTORY_SEPARATOR, array($outputFilePath, "document.pb"));
        $serializedData = readPBData($pbFilePath);
        $outputFileUrl = $uploadDir['url'] . "/{$uploadFileName}";
    } else {
        $outputFileUrl = $uploaded_file;
        $serializedData = !isset( $uploaded_file['error'] );
    }

    echo json_encode(array(
        'serializedData' => $serializedData,
        'importPath' => $outputFileUrl
    ));
    die();
}

/*
 * convertor document
 */
function executeConverter($inputFilePath, $outputFilePath)
{
    $sedocConverterPath = plugin_dir_path(__FILE__) . 'resource\sedocConverter\sedocConverter.exe';
    $fontsDir = plugin_dir_path(__FILE__) . 'resource\sedocConverter\fonts';
    $tempDir = plugin_dir_path(__FILE__) . 'resource\sedocConverter\tmp';

    $cmd = "${sedocConverterPath} -f ${fontsDir} ${inputFilePath} ${outputFilePath} ${tempDir}";
    exec($cmd);
}

/*
 * serialized data
 */
function readPBData($pbFilePath)
{
    $fb = fopen($pbFilePath, 'r');
    $data = stream_get_contents($fb, -1, 16);
    fclose($fb);

    $byteArray = unpack('C*', zlib_decode($data));
    $serializedData = array_values($byteArray);

    return $serializedData;
}

add_action( 'wp_ajax_import_doc', 'import_doc' );
add_action( 'wp_ajax_nopriv_import_doc', 'import_doc' );


/**
 * Admin page setting
 */
function me_add_to_admin_menu() {
    add_menu_page( 'Synap Editor Configuration Page', 'Synap Editor Config',
        'manage_options', 'synap-editor-config', 'me_admin_menu' );
}

function me_admin_menu() {
    require('admin/synap-admin.php');
}

function register_my_settings() {
    register_setting( 'synap-editor-conf', 'width' );
    register_setting( 'synap-editor-conf', 'height' );
    register_setting( 'synap-editor-conf', 'default_lang' );
    register_setting( 'synap-editor-conf', 'lang' );
    register_setting( 'synap-editor-conf', 'toolbar' );
}

if (is_admin()) {
    add_action('admin_menu', 'me_add_to_admin_menu');
    add_action('admin_init', 'register_my_settings');
}


/synapeditor_plugin/admin/synap-admin.php
<?php
/**
 * Created by synapeditor.
 */

if ( !current_user_can( 'manage_options' ) )  {
    wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}

?>

<div class="wrap">
    <h1>Synap Editor Configuration</h1>

    <form method="post" action="options.php">
        <?php settings_fields( 'synap-editor-conf' ); ?>
        <?php do_settings_sections( 'synap-editor-conf' ); ?>
        <label for="width">에디터 너비</label>
        <input id="width" name="width" type="text" value="<?php echo esc_attr( get_option('width') ); ?>"/>
        <br/>
        <label for="height">에디터 높이</label>
        <input id="height" name="height" type="text" value="<?php echo esc_attr( get_option('height') ); ?>"/>

        <hr/>
        <label for="default_lang">에디터 기본언어</label>
        <input id="default_lang" name="default_lang" type="text" value="<?php echo esc_attr( get_option('default_lang') ); ?>"/>
        <br/>
        <label for="lang">에디터 언어</label>
        <input id="lang" name="lang" type="text" value="<?php echo esc_attr( get_option('lang') ); ?>"/>
        <hr/>
        <fieldset>
            <legend>에디터 툴바</legend>

            <?php
                $options = get_option( 'toolbar' );
                $toolbars = [
                    ['bold', '굵게'], ['italic', '기울게'], ['underline', '밑줄'], ['strike', '취소선'],
                    ['superScript', '위첨자'], ['subScript', '아래첨자'], ['fontColor', '글자색'], ['fontBackgroundColor', '글자 배경색'],
                    ['align', '정렬'], ['copyRunStyle', '서식 복사'], ['pasteRunStyle', '서식 붙여넣기'], ['removeRunStyle', '서식 지우기'],
                    ['link', '링크'], ['image', '이미지'], ['backgroundImage', '배경이미지'], ['video', '비디오'],
                    ['file', '파일'], ['horizontalLine', '가로줄'], ['specialCharacter', '특수문자'], ['emoji', '이모지'],
                    ['insertDiv', '블럭 레이어'], ['bulletList', '글머리 기호'], ['numberedList', '글머리 번호'], ['multiList', '다단계 글머리']
                ];

                $idx = 0;
                foreach ($toolbars as $toolbar) {
                    echo "<input name='toolbar[$toolbar[0]]' type='checkbox' value='1'", checked( isset( $options[$toolbar[0]] ) ) ,"/> $toolbar[1] ";
                    if (++$idx % 4 == 0) {
                        echo "<br/>";
                    }
                }
            ?>
        </fieldset>


        <?php submit_button(); ?>
    </form>
</div>


  • No labels