Page tree

Versions Compared

Key

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

Table of Contents

1.

 다운로드

 Download

2.

사전준비
  • 사이냅에디터 워드프레스 플러그인을 다운로드 합니다.
  • 사이냅에디터 파일을 준비합니다

    Preparation

    1. Download Synap Editor Wordpress plugin.
    2. repare Synap Editor file.
      • synapeditor.min.js (필수required)
      • synapeditor.min.css css (필수required)
      • license.json json (필수required)
      • synapeditor.config.js (선택optional)
      • sedocConverter sedocConverter (선택optional)
    3. 압축을 풀고 파일들Decompress the files (synapeditor.min.js, synapeditor.min.css, synapeditor.config.js) 을 resource폴더에 넣어줍니다.실행파일(sedocConverter)이 있는 경우 resource/sedocConverter폴더에 넣어줍니다and move them to resource folder.
    4. 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.

    소스코드

    Source Code

    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