wecenter 3.1.2替換編輯器為umeditor過程實錄
原文連結
http://www.kandaoni.com/experience/16
為了防止自己忘掉，還是放上來吧。改後有許多BUG…改的太多就不放上來了
wecenter 3.1.2替換編輯器為umeditor過程實錄
WeCenter 是一款知識型的社交化開源社群程式，專注於企業和行業社群內容的整理、歸類、檢索和再發行。
wecenter一開始是用的是markdown編輯器，現在改成修改過的ckeditor，但總歸是滿足得了部分人，不能滿足部分人。現在這裡一步一步替換編輯器為umeditor。
使用的版本是wecenter 3.1.2
- 下載umeditor
我們先到
http://ueditor.baidu.com/website/onlinedemo.html
下載需要的版本，我下載的是
http://ueditor.baidu.com/build/build_down.php?n=umeditor&v=1_2_2-utf8-php
解壓，命名資料夾為umeditor，複製到/static/
2. 修改functions.app.php
開啟/system/functions.app.php
大概256行位置，修改程式碼為
function import_editor_static_files()
{
//TPL::import_js(‘js/editor/ckeditor/ckeditor.js’);
//TPL::import_js(‘js/editor/ckeditor/adapters/jquery.js’);
TPL::import_css(‘umeditor/themes/default/css/umeditor.css’);
TPL::import_js(‘umeditor/umeditor.config.js’);
TPL::import_js(‘umeditor/umeditor.min.js’);
TPL::import_js(‘umeditor/lang/zh-cn/zh-cn.js’);
}
3.新增相容性css
開啟檔案/static/css/default/common.css
在末尾新增
/* fix umeditor */
.autosize{overflow-y:hidden !important;}
.edui-container{width:100% !important;}
.edui-body-container{width:100% !important;}
.modal-body .edui-body-container{width:100% !important;min-height:134px !important;}
.aw-editor-box .mod-head{border:none;}
開啟/static/js/app/publish.js
這個檔案有兩個地方需要修改，分別是
1、大概17行，修改為
// 判斷是否開啟ck編輯器
if (G_ADVANCED_EDITOR_ENABLE == ‘Y’)
{
// 初始化編輯器
//var editor = CKEDITOR.replace( ‘wmd-input’ );
var editor = UM.getEditor(‘wmd-input’);
}
2、大概100行，修改為
// 自動儲存草稿
//$(‘textarea.wmd-input’).bind(‘blur’, function() {
editor.addListener(‘blur’, function() {
if (editor.hasContents())
{
$.post(G_BASE_URL + ‘/account/ajax/save_draft/item_id-1’ + PUBLISH_TYPE, ‘message=’ + encodeURIComponent(editor.getContent()),function (result) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲question_detail…(‘textarea#advanced_editor’).attr(‘value’, ‘’); AWS.User.delete_draft(1, ‘’ + PUBLISH_TYPE + ‘’); $(this).parent().html(’ ‘); return false;">’ + _t(‘刪除草稿’) +’’);
}, ‘json’);
}
});
5.修改question_detail.js
開啟/static/js/app/question_detail.js
這個檔案要修改一個地方
大概23行，修改為
if (G_ADVANCED_EDITOR_ENABLE == ‘Y’)
{
//EDITOR = CKEDITOR.replace( ‘wmd-input’);
EDITOR = UM.getEditor(‘wmd-input’);
EDITOR_CALLBACK = function (evt)
{
//if (evt.editor.getData().length)
if (EDITOR.hasContents())
{
//$.post(G_BASE_URL + ‘/account/ajax/save_draft/’ + QUESTION_ID + ‘’ + ANSWER_TYPE, ‘message=’ + evt.editor.getData(), function (result) {
$.post(G_BASE_URL +’/account/ajax/save_draft/’ + QUESTION_ID + ‘’ + ANSWER_TYPE,‘message=’ + encodeURIComponent(EDITOR.getContent()), function (result) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲answer_content_…(‘textarea#advanced_editor’).attr(‘value’, ‘’); AWS.User.delete_draft(QUESTION_ID, ANSWER_TYPE); $(this).parent().html(’ ‘); return false;">’ + _t(‘刪除草稿’) + ‘’);
}, ‘json’);
}
}
// 自動儲存草稿
//EDITOR.on( ‘blur’, EDITOR_CALLBACK);
EDITOR.addListener( ‘blur’, EDITOR_CALLBACK);
}
6.修改fileupload.js
開啟/static/js/fileupload.js
大概365行，修改為
// 建立插入按鈕
createInsertBtn : function (attach_id)
{
var btn = this.toElement(this.options.insertBtnTemplate), _this = this;
$(btn).click(function()
{
//if (typeof CKEDITOR != ‘undefined’)
if (typeof UM != ‘undefined’)
{
//_this.editor.insertText("\n[attach]" + attach_id + “[/attach]\n”);
_this.editor.execCommand(‘insertHtml’, “
[attach]” + attach_id + “[/attach]
”);}
else
{
_this.editor.val( _this.editor.val() + “\n[attach]” + attach_id + “[/attach]\n”);
}
});
return btn;
},
7.修改aws.js
開啟/static/js/aws.js
在大概134行，註釋掉
/* if (typeof CKEDITOR != ‘undefined’)
{
for ( instance in CKEDITOR.instances ) {
CKEDITOR.instances[instance].updateElement();
}
} */
在大概716行，修改為
//var editor = CKEDITOR.replace( ‘editor_reply’ );
var editor = UM.getEditor( ‘editor_reply’ );
8.修改/app/account/ajax.php
開啟/app/account/ajax.php
大概435行，修改為
//fix
_POST[‘message’]);
_GET[‘item_id’], $_GET[‘type’], $this->user_id, $_POST);
9.修改/app/article/main.php
開啟/app/article/main.php
大概62行，修改為
article_info[‘message’]));
大概212行，修改為
foreach ($article_list AS $key => $val)
{
key][‘user_info’] =
val[‘uid’]];
key][‘message’] = htmlspecialchars_decode($val[‘message’]);
}
10.修改/app/question/main.php
開啟/app/question/main.php
大概254行，修改為
//$answer[‘answer_content’] =
answer[‘answer_content’]))));
$answer[‘answer_content’] =
answer[‘answer_content’])));
大概305行，修改為
//
question_info[‘question_detail’])));