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

적용하기

라이센스 파일을 resource폴더에 넣어줍니다.파일(license.json)을 resource폴더에 넣어줍니다.

resource/synapeditor.config.json js 파일을 수정 합니다.

Code Block

language	js
theme	Emacs
title	/wordpress_plugin/resource/synapeditor.config.jsonjs
linenumbers	true

{
  "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"},
}

wordpress_plugin 폴더 전체를 복사하여 "\wordpress\wp-content\plugins\"에 넣어줍니다.

...

Code Block

language	php
theme	Emacs
title	wordpress_plugin/index.php
linenumbers	true

<?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.min.js', array( 'jquery' ));
    wp_enqueue_script('synapeditor', 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);
    $configUrl = plugin_dir_url(__FILE__) . 'resource/config.json';

    echo "<textarea id=\"content\" name=\"content\" style=\"display: none;\">$content</textarea>" ;
    echo "<script>";
    echo "window.onload = function () {";
    echo "window.editor = new SynapEditor('content', '{$configUrl}'synapEditorConfig);";
    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
        $pbFilePath = join(DIRECTORY_SEPARATOR, array($outputFilePath, "document.word.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

language	php
theme	Emacs
title	wordpress_plugin/admin/synap-admin.php
linenumbers	true

<?php
/**
 * Created by IntelliJ IDEAsynapeditor.
 */
Date: 9/30/18
 * Time: 10:43 PM
 */

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

...

Code Block

language	js
theme	Emacs
title	wordpress_plugin/resource/synapeditor.config.jsonjs
linenumbers	true

var synapEditorConfig = {
  "editor.license": "http://localhost/wordpress/wp-content/plugins/synapeditor/resource/license.json",
  "editor.sizeimport.widthapi": "100%",
  "editor.size.height": "100%",
  "editor.lang.default": "en",
  "editor.lang": "",
  "editor.toolbar": [
    "new",
    "open",
    "print",
    "pageBreak",
    "|",
    "template",
    "layout",
    "autoSave",
    "|",
    "undo",
    "redo",
    "|",
    "paragraphStyleWithText",
    "|",
    "fontFamilyWithText",
    "|",
    "fontSizeWithText",
    "|",
    "customParagraphStyle",
    "customRunStyle",
    "|",
    "growFont",
    "shrinkFont",
    "|",
    "bold",
    "italic",
    "underline",
    "strike",
    "|",
    "superScript",
    "subScript",
    "|",
    "fontColor",
    "fontBackgroundColor",
    "|",
    "align",
    "-",
    "copy",
    "cut",
    "paste",
    "|",
    "copyRunStyle",
    "pasteRunStyle",
    "removeRunStyle",
    "|",
    "link",
    "unlink",
    "|",
    "table",
    "image",
    "background",
    "video",
    "file",
    "horizontalLine",
    "specialCharacter",
    "emoji",
    "div",
    "drawDiv",
    "quote",
    "|",
    "bulletList",
    "numberedList",
    "multiLevelList",
    "|",
    "increaseIndent",
    "decreaseIndent",
    "|",
    "lineHeight",
    "|",
    "paragraphProperties",
    "|",
    "fullScreen",
    "source",
    "preview",
    "ruler",
    "divGuide",
    "|",
    "accessibility",
    "personalDataProtection",
    "find",
    "conversion",
    "bookmark"
  ],
  "editor.mobile.toolbar": {
    "main": [
      "open",
      "undo",
      "redo",
      "copy",
      "paste",
      "directInsertImage",
      "directInsertTable",
      "simpleLink",
      "fullScreen",
      "bulletList",
      "numberedList",
      "multiLevelList",
      "align",
      "increaseIndent",
      "decreaseIndent",
      "lineHeight",
      "quote",
      "horizontalLine"
    ],
    "text": [
      "paragraphStyle",
      "fontSize",
      "bold",
      "italic",
      "underline",
      "strike",
      "simpleFontColor",
      "simpleFontBackgroundColor"
    ],
    "table": [
      "insertRowBefore",
      "insertRowAfter",
      "insertColBefore",
      "insertColAfter",
      "deleteRow",
      "deleteCol",
      "mergeCell",
      "simpleFill",
      "simpleBorderColor",
      "lineThickness",
      "lineStyle",
      "verticalAlign",
      "deleteTable"
    ],
    "div": [
      "simpleDrawingObjectFill",
      "simpleDrawingObjectBorderColor",
      "drawingObjectLineThickness",
      "drawingObjectLineStyle",
      "deleteLayer"
    ],
    "image": [
      "rotateDrawingObjectLeft",
      "rotateDrawingObjectRight",
      "deleteImage"
    ],
    "video": [
      "deleteVideo"
    ]
  },
  "editor.menu.show": true,
  "editor.menu.list": [
    "file",
    "edit",
    "view",
    "insert",
    "format",
    "table",
    "tools",
    "help"
  ],
  "editor.menu.definition": {
    "file": [
      "new",
      "open",
      "-",
      "template",
      "layout",
      "autoSave",
      "-",
      "print",
      "pageBreak"
    ],
    "edit": [
      "undo",
      "redo",
      "-",
      "copy",
      "paste",
      "cut",
      "-",
      "copyRunStyle",
      "pasteRunStyle",
      "-",
      "find"
    ],
    "view": [
      "fullScreen",
      "-",
      "source",
      "preview",
      "-",
      "ruler",
      "divGuide"
    ],
    "insert": [
      "link",
      "image",
      "background",
      "-",
      "video",
      "file",
      "div",
      "drawDiv",
      "bookmark",
      "horizontalLine",
      "-",
      "specialCharacter",
      "emoji"
    ],
    "format": [
      "bold",
      "italic",
      "underline",
      "strike",
      "-",
      "superScript",
      "subScript",
      "-",
      {
        "groupName": "list",
        "subMenuItems": [
          "bulletList",
          "numberedList",
          "multiLevelList"
        ]
      },
      "increaseIndent",
      "decreaseIndent",
      "-",
      {
        "groupName": "align",
        "subMenuItems": [
          "alignLeft",
          "alignCenter",
          "alignRight",
          "alignJustify"
        ]
      },
      "removeRunStyle",
      "paragraphProperties"
    ],
    "table": [
      "table",
      "deleteTable",
      "tableProperties",
      "-",
      {
        "groupName": "row",
        "subMenuItems": [
          "insertRowBefore",
          "insertRowAfter",
          "deleteRow"
        ]
      },
      {
        "groupName": "column",
        "subMenuItems": [
          "insertColBefore",
          "insertColAfter",
          "deleteCol"
        ]
      },
      {
        "groupName": "cell",
        "subMenuItems": [
          "mergeCell",
          "splitCell",
          "cellProperties"
        ]
      }
    ],
    "tools": [
      "accessibility",
      "personalDataProtection"
    ],
    "help": [
      "help",
      "shortcut",
      "about"
    ]
  },
  "editor.customStyle.paragraph": [
    {
      "name": "Gray",
      "style": {
        "color": {
          "r": 170,
          "g": 170,
          "b": 170
        }
      }
    }
  ],
  "editor.customStyle.textRun": [
    {
      "name": "BigRed",
      "style": {
        "fontSize": 32,
        "color": {
          "r": 255,
          "g": 0,
          "b": 0
        }
      }
    },
    {
      "name": "SmallBlue",
      "style": {
        "fontSize": 16,
        "color": {
          "r": 0,
          "g": 0,
          "b": 255
        }
      }
    }
  ],
  "editor.import.maxSize": 10485760,
  "editor.import.api": "admin-ajax.php",
  "editor.import.param": {"action": "import_doc"},
  "editor.upload.maxSize": 3145728,
  "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"},
  "editor.template": [
    {
      "category": "template_category1",
      "label": "Intra1 양식",
      "items": [
        {
          "name": "도서구매요청",
          "path": "/resource/template/template1.html"
        }
      ]
    }
  ],
  "editor.autoSave": true,
  "editor.autoSave.period": 60000,
  "editor.contentFilter.allowIFrame": false,
  "editor.contentFilter.allowScript": falseadmin-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"}
}

Space shortcuts

Page tree

Versions Compared

Old Version 4

New Version 5

Key

적용하기

Space shortcuts

Page tree

Page History

Versions Compared

Old Version 4

New Version 5

Key

적용하기