Page tree

Versions Compared

Key

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

Table of Contents

1. Download

2. Preparation

  1. 사이냅에디터 워드프레스 플러그인을 다운로드 합니다.
  2. 사이냅에디터 파일을 준비합니다Download Synap Editor Wordpress plugin.
  3. repare Synap Editor file.
    • synapeditor.min.js (필수required)
    • synapeditor.min.css css (필수required)
    • license.json json (필수required)
    • synapeditor.config.js (선택optional)
    • sedocConverter sedocConverter (선택optional)
  4. 압축을 풀고 파일들Decompress the files (synapeditor.min.js, synapeditor.min.css, synapeditor.config.js) 을 resource폴더에 넣어줍니다.실행파일(sedocConverter)이 있는 경우 resource/sedocConverter폴더에 넣어줍니다and move them to resource folder.
  5. If there is any executable file (sedocConverter), move it to resource/sedocConverter folder.

3.

적용하기라이센스 파일

Applying

  1. Move the license file (license.json) 을 resource폴더에 넣어줍니다to resource folder.
  2. Modify resource/synapeditor.config.js 파일을 수정 합니다. 아래 항목은 워드프레스 플러그인 적용시 필수 수정 항목입니다file. The following aspects must be modified when you apply Wordpress plugin.

    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. Copy the whole wordpress_plugin 폴더 전체를 복사하여 folder and paste it into "\wordpress\wp-content\plugins\"에 넣어줍니다.
4. 소스코드
  1. .


4. Source Code

Warning
titleCaution

Among the following codes provided as the guide, file upload part is a sample code and has insufficient security.

As for the file upload, please use the code used within your project and refer the following code to handle the system link.


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
		// Since v2.3.0 부터 파일명이, the file name is changed from document.word.pb에서pb to document.pb로 변경됨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');
}



Code Block
languagephp
themeEmacs
title/synapeditor_plugin/admin/synap-admin.php
linenumberstrue
<?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">에디터>Editor 너비<Width</label>
        <input id="width" name="width" type="text" value="<?php echo esc_attr( get_option('width') ); ?>"/>
        <br/>
        <label for="height">에디터>Editor 높이<Height</label>
        <input id="height" name="height" type="text" value="<?php echo esc_attr( get_option('height') ); ?>"/>

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

            <?php
                $options = get_option( 'toolbar' );
                $toolbars = [
                    ['bold', '굵게Bold'], ['italic', '기울게Italic'], ['underline', '밑줄Underline'], ['strike', '취소선Strikethrough'],
                    ['superScript', '위첨자Superscript'], ['subScript', '아래첨자Subscript'], ['fontColor', '글자색Font Color'], ['fontBackgroundColor', '글자Shading 배경색Color'],
                    ['align', '정렬Alignment'], ['copyRunStyle', '서식Copy 복사Formatting'], ['pasteRunStyle', '서식Paste 붙여넣기Formatting'], ['removeRunStyle', '서식Clear 지우기Formatting'],
                    ['link', '링크Hyperlink'], ['image', '이미지Image'], ['backgroundImage', '배경이미지Background Image'], ['video', '비디오Video'],
                    ['file', '파일File'], ['horizontalLine', '가로줄Horizontal Line'], ['specialCharacter', '특수문자Special Character'], ['emoji', '이모지Emoji'],
                    ['insertDiv', '블럭Block 레이어Layer'], ['bulletList', '글머리Bulleted 기호List'], ['numberedList', '글머리Numbered 번호List'], ['multiList', '다단계Multilevel 글머리List']
                ];

                $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>



관련정보See also


Children Display
pageIntegration