分享一个WeCenter2.5.10版本使用百度编辑器的方法

kevin-ying

o(-`д´- ｡)｡･ﾟﾟ･(>д<;)･ﾟﾟ
这里不讲具体方法了，反正亲测有效，大家使用后有什么问题可以说下，**不保证会解决哦**。我用的是ueditor最新的php版本，功能都是默认的，要自己添加或减少编辑器功能的可以参考官方API[http://ueditor.baidu.com/doc/#](http://ueditor.baidu.com/doc/#)

[/url]


[url=http://wenda.wecenter.com/uploads/article/20140510/654502cb0b8dc8eee9a7d80e7086364c.png]






##使用方法：

下载文件解压后把里面的四个文件分别放到程序根目录下，覆盖就可以了。当然你最好自己看清楚一下各个文件的路劲.

这个改动很大，所以呢没有太必要必要的同学就不要换了，**使用后导致网站出现404我个人概不负责**{{|└(>o< )┘|}}，一个百度编辑器就好几M呢Σ(-`Д´-ﾉ；)ﾉ，所以呢Markdown这么高大上的轻量级编辑器还是不错的。

在手机上这个编辑器无法自适应大小，所以有需要的可能要自己改下css。我这里改了些iphon和ipad竖屏的宽度，有需要的可以参考下在common.css添加：

1. {{{
   
2. @media (max-width:321px){
   
3. .edui-default .edui-editor,
   
4. .edui-default .edui-editor-toolbarbox,
   
5. .edui-default .edui-editor-toolbarboxouter,
   
6. .edui-default .edui-editor-iframeholder ,
   
7. .autosize.edui-default{width: 243px!important;}
   
8. .edui-splitbutton-body,
   
9. .edui-menubutton-body,
   
10. .edui-combox-body {display: none;}
    
11. }
    
12. }}}
    
13. 
    
14. {{{
    
15. @media (max-width:640px){
    
16. .edui-default .edui-editor,
    
17. .edui-default .edui-editor-toolbarbox,
    
18. .edui-default .edui-editor-toolbarboxouter,
    
19. .edui-default .edui-editor-iframeholder ,
    
20. .autosize.edui-default {width: 489px!important;}
    
21. .edui-splitbutton-body,
    
22. .edui-menubutton-body,
    
23. .edui-combox-body {display: none;}
    
24. }
    
25. }}}

复制代码

下載地址: http://pan.baidu.com/s/1eQzvBlK

kevin-ying

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

1. {
   
2.                         // codemirror
   
3.                         TPL::import_css('js/editor/codemirror/lib/codemirror.css');
   
4.                         TPL::import_js('js/editor/codemirror/lib/codemirror.js');
   
5.                         TPL::import_js('js/editor/codemirror/lib/util/continuelist.js');
   
6.                         TPL::import_js('js/editor/codemirror/mode/xml/xml.js');
   
7.                         TPL::import_js('js/editor/codemirror/mode/markdown/markdown.js');
   
8. 
   
9.                         // editor
   
10.                         TPL::import_js('js/editor/jquery.markitup.js');
    
11.                         TPL::import_js('js/editor/markdown.js');
    
12.                         TPL::import_js('js/editor/sets/default/set.js');
    
13.                 }

复制代码

替换成

1. {
   
2.                         // codemirror
   
3.                         TPL::import_css('js/ueditor/third-party/codemirror/codemirror.css');
   
4.                         TPL::import_js('js/ueditor/third-party/codemirror/codemirror.js');
   
5. 
   
6.                         // editor
   
7.                         TPL::import_js('js/ueditor/ueditor.config.js');
   
8.                         TPL::import_js('js/ueditor/ueditor.all.min.js');
   
9.                 }

复制代码

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

1. <div class="aw-mod-head">
   
2.         <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>
   
3.                 <script type="text/javascript">
   
4.                         var ue = UE.getEditor('advanced_editor');
   
5.                 </script>
   
6.         <p class="aw-text-color-999"><span class="pull-right" id="question_detail_message"> </span></p>
   
7. </div>

复制代码

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

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

复制代码

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

1. <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>
   
2.                                                         <script type="text/javascript">
   
3.                                                                 var ue = UE.getEditor('advanced_editor');
   
4.                                                         </script>
   
5.                                                 <p class="aw-text-color-999"><span class="pull-right" id="answer_content_message"> </span></p>

复制代码

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

1. function parse_link_callback($matches)
   
2. {
   
3.         if (preg_match('/^(?!http).*/i', $matches[1]))
   
4.         {
   
5.                 $url = 'http://' . $matches[1];
   
6.         }
   
7.         else
   
8.         {
   
9.                 $url = $matches[1];
   
10.         }
    
11.        
    
12.         if (is_inside_url($url))
    
13.         {
    
14.                 return '<a href="' . $url . '">' . FORMAT::sub_url($matches[1], 50) . '</a>';
    
15.         }
    
16.         else
    
17.         {
    
18.                 return '<a href="' . $url . '" rel="nofollow" target="_blank">' . FORMAT::sub_url($matches[1], 50) . '</a>';
    
19.         }
    
20. }

复制代码

删除。。
这一步主要是发布网址时，网址末尾会自动带有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、草稿功能无效。。
结束。。问题不少，所以还希望各位老大不吝赐教！！
本文中的修改方法可能存在不完整，有问题可以回复我。。