Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

주의사항

가이드로 제공되는 아래 코드는 샘플 코드로서, 리소스 관리나 보안 관련 처리에 대해서는 미흡할 수 있습니다.

단순 참고용으로만 사용해주세요.

다운로드

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 파일을 수정 합니다. 아래 항목은 워드프레스 플러그인 적용시 필수 수정 항목입니다.

    Code Block
    languagejs
    themeEmacs
    title/synapeditor_plugin/resource/synapeditor.config.js
    linenumberstrue
    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. 소스코드

Code Block
languagephp
themeEmacs
title/synapeditor_plugin/index.php
linenumberstrue
<?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');
}


...