【抛砖引玉】2.5beta更换百度编辑器Ueditor具体步骤和问题

首先,应该去ue网站下载UE,其实UM也是非常不错的,但是代码中可能和WC本身有一些CSS和JS有重复的地方,所以有一些冲突存在,我UE和UM都试过,最终选择了使用UE。使用Ubuilder来创建适合自己的编辑器,下载好之后解压到WC的网站根目录的static下的js文件夹下,最终目录结构是这样的\wwwroot\static\js\ueditor
然后修改根目录app文件夹下的publish文件夹中的main.php
找到

{
// codemirror
TPL::import_css('js/editor/codemirror/lib/codemirror.css');
TPL::import_js('js/editor/codemirror/lib/codemirror.js');
TPL::import_js('js/editor/codemirror/lib/util/continuelist.js');
TPL::import_js('js/editor/codemirror/mode/xml/xml.js');
TPL::import_js('js/editor/codemirror/mode/markdown/markdown.js');

// editor
TPL::import_js('js/editor/jquery.markitup.js');
TPL::import_js('js/editor/markdown.js');
TPL::import_js('js/editor/sets/default/set.js');
}

替换成

{
// codemirror
TPL::import_css('js/ueditor/third-party/codemirror/codemirror.css');
TPL::import_js('js/ueditor/third-party/codemirror/codemirror.js');

// editor
TPL::import_js('js/ueditor/ueditor.config.js');
TPL::import_js('js/ueditor/ueditor.all.min.js');
}


全部替换完,然后article和question文件夹中的main.php也同样如法炮制。。
这一步是在发布问题页,发布文章页,问题内容页的回复框,这三个页面替换掉原编辑器的引用,引用成ue编辑器。。
第二步,\wwwroot\views\default下的publish和question文件夹中的index.tpl.htm,包括article.tpl.htm,需要增加ue的调用。
publish下的index.tpl.htm
找到“问题补充”,下面第三行开始,对照着我的代码,修改成

<div class="aw-mod-head">
<script type="text/plain" style="width:687px;" name="question_detail" id="advanced_editor" rows="20" class="autosize"><?php echo $this->question_info['question_detail']; ?></script>
<script type="text/javascript">
var ue = UE.getEditor('advanced_editor');
</script>
<p class="aw-text-color-999"><span class="pull-right" id="question_detail_message">&nbsp;</span></p>
</div>

我把textarea标签换成了script type="text/plain",然后下面的那行script是UE的召唤术,呵呵。。
能看懂的自然能懂。。
然后是article.tpl.htm
“文章内容”的下面第二行如法炮制,需要注意的是只改标签,千万不要改标签名。。

<div class="aw-mod-head">
<script type="text/plain" style="width:927px;" name="message" id="advanced_editor" rows="20" class="autosize"><?php echo $this->article_info['message']; ?></script>
<script type="text/javascript">
var ue = UE.getEditor('advanced_editor');
</script>
<p class="aw-text-color-999"><span class="pull-right" id="article_message">&nbsp;</span></p>
</div>

question文件夹中的index也是一样。。
“回复编辑器”的下面第N行,整个代码的大概308行

<script type="text/plain" style="width:645px;" name="answer_content" id="advanced_editor" rows="15" class="autosize"><?php echo htmlspecialchars($this->draft_content['message']); ?></script>
<script type="text/javascript">
var ue = UE.getEditor('advanced_editor');
</script>
<p class="aw-text-color-999"><span class="pull-right" id="answer_content_message">&nbsp;</span></p>

修改后保存,然后打开页面,发布问题页,发布文章页,问题内容页的回复框这三个需要高级编辑器的地方都已经替换好了ueditor。。发布一个带有高级字体格式的问题试试,可以正常发出去了,但是,会直接显示出来代码,而不是实际设置的格式效果。。
第三步,根目录下的models文件夹下,article.php,answer.php,publish.php,question.php,这四个文件控制了文章页、回答问题、发布问题、问题页的编辑器转义,有可能我记的不清,但肯定有这四个。。
搜索htmlspecialchars,根据后面括号中的内容决定是否删除,删的时候也要删除前后的括号。。
这个很难说明,下面我会上传我修改后的文件压缩包,可以对比查看。。
这一步做完,发布时编辑器带有的格式信息就可以正常发布正常显示了。。
第四步,根目录下system文件夹下functions.inc.php
找到大概906行开始

function parse_link_callback($matches)
{
if (preg_match('/^(?!http).*/i', $matches[1]))
{
$url = 'http://' . $matches[1];
}
else
{
$url = $matches[1];
}

if (is_inside_url($url))
{
return '<a href="' . $url . '">' . FORMAT::sub_url($matches[1], 50) . '</a>';
}
else
{
return '<a href="' . $url . '" rel="nofollow" target="_blank">' . FORMAT::sub_url($matches[1], 50) . '</a>';
}
}

删除。。
这一步主要是发布网址时,网址末尾会自动带有X2X X5X之类的,两头是X中间是数字的小尾巴问题。。
然后就完成了,当然,替换了编辑器,可能存在一些小问题,那就需要自己调整微调了。。
最后,我尝试了几次,想把上传路径规范一下,未果。。
我现在的问题是,
1、编辑回复时,因为使用的是纯文本编辑器,会直接显示代码,也可以直接编辑代码,比较不安全,我取消了编辑回复功能。。
2、快速发起使用的也是纯文本编辑器,我也取消了快速发起问题。。
3、编辑器功能方面,我只保留了几个常用且非常有用的功能。
加粗,字体颜色,表情,图片,视频,附件,截屏,自动排版
4、部分包含文章标题和简略内容的页面,还有手机版文章页面,内容部分会显示Warning: Invalid argument supplied for foreach() in /www/web/imzxt/public_html/views/default/article/ajax/list.tpl.htm on line 9
5、问题和回复的删除非常不方便。。希望WC能把删除功能放在前台页面上来,而不是编辑页面。。
6、编辑器快捷键部分无效。。ctrl+回车可以提交,但返回的是{"rsm":{"url":"http:\/\/www.imzxt.com\/question\/25?item_id=37&rf=false"},"errno":1,"err":null},此时网址是http://www.imzxt.com/question/ajax/save_answer/,怀疑是ajax保存回复那部分没有搭配好。。
7、草稿功能无效。。
结束。。问题不少,所以还希望各位老大不吝赐教!!
本文中的修改方法可能存在不完整,有问题可以回复我。。
已邀请:

tianlongdihu - 订阅号:vzhongtou

赞同来自: 小明明 qiaojianchao

第三步补充一下: 当前是按照MarkDown语法进行分析,这个要替掉。比如在article的情形下:

原来:$article_info['message'] = FORMAT::parse_attachs(nl2br(FORMAT::parse_markdown($article_info['message'])));
改成:$article_info['message'] = htmlspecialchars_decode($article_info['message']);

重剑无锋

赞同来自: biu

这种东西不敢轻易动啊,有没有成功的啊

ceoxzw - 让WeCenter更人性化...

真的是高人,谢了收了

boonoo - 希望WC能像WP一样给力

支持一下,呵呵

lidanghong - 服务管理,http://www.langwawa.com

需要这样奉献与敢于尝试的人,赞一个!

ysy49271743 - 80hou

十分感谢楼主的分享,我喜欢了。

不黑不成神 - 80后IT屌丝

最后楼主都没告诉我们 你搞成功了没? 我也想换 官方的编辑器实在太烂了!

iamerotic - 站者长大的!

有些麻烦了

buffonly - www.aqys.com

确实可以,很好用,感谢楼主

该问题目前已经被锁定, 无法添加新回复