다운로드
사전준비
- 사이냅에디터 워드프레스 플러그인을 다운로드 합니다.
- 압축을 풀고 synapeditor의 js파일, css파일을 resource폴더에 넣어줍니다.
- 실행파일(sedocConverter)이 있는 경우 resource/sedocConverter에 넣어줍니다.
적용하기
- 라이센스 파일을 resource폴더에 넣어줍니다.
resource/config.json 파일을 수정 합니다.
/wordpress_plugin/resource/config.json{ "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\"에 넣어줍니다.
소스코드
<?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_style('synapeditor', plugin_dir_url(__FILE__) . 'resource/synapeditor.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}');"; 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'); }
<?php /** * Created by IntelliJ IDEA. * User: jyheo * Date: 9/30/18 * Time: 10:43 PM */ 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>
{
"editor.license": "http://localhost/wordpress/wp-content/plugins/synapeditor/resource/license.json",
"editor.size.width": "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": false
}