...
1. 다운로드
2. 사전준비
- 사이냅에디터 워드프레스 플러그인을 다운로드 합니다.
- 사이냅에디터 파일을 준비합니다.
- 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폴더에 넣어줍니다.
3. 적용하기
- 라이센스 파일(license.json)을 resource폴더에 넣어줍니다.
resource/synapeditor.config.js 파일을 수정 합니다. 아래 항목은 워드프레스 플러그인 적용시 필수 수정 항목입니다.
Code Block language js theme Emacs title /synapeditor_plugin/resource/synapeditor.config.js linenumbers true 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"}, ... }
- wordpress_plugin 폴더 전체를 복사하여 "\wordpress\wp-content\plugins\"에 넣어줍니다.
4. 소스코드
Warning | ||
---|---|---|
| ||
가이드로 제공되는 아래 코드 중 파일 업로드 부분은 샘플 코드로서 보안 관련 처리가 미흡합니다. 파일 업로드 부분은 프로젝트 내부에서 사용하시는 부분을 그대로 사용하시고 아래 코드를 참고하셔서 연동 부분을 처리해주세요. |
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<?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');
}
|
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<?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">에디터 너비</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>
|
관련정보
Children Display | ||
---|---|---|
|