源于生活

标题: 分享一个WeCenter2.5.10版本使用百度编辑器的方法 [打印本页]
作者: kevin-ying    时间: 2015-7-15 19:39
标题: 分享一个WeCenter2.5.10版本使用百度编辑器的方法
o(-`д´- ｡)｡･ﾟﾟ･(>д<;)･ﾟﾟ
这里不讲具体方法了，反正亲测有效，大家使用后有什么问题可以说下，**不保证会解决哦**。我用的是ueditor最新的php版本，功能都是默认的，要自己添加或减少编辑器功能的可以参考官方API[http://ueditor.baidu.com/doc/#](http://ueditor.baidu.com/doc/#)

[attach]1000[/attach]


[attach]1001[/attach]






##使用方法：

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

这个改动很大，所以呢没有太必要必要的同学就不要换了，**使用后导致网站出现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. }}}

  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    时间: 2015-7-15 19:43
首先，应该去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');

  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');

  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、草稿功能无效。。
结束。。问题不少，所以还希望各位老大不吝赐教！！
本文中的修改方法可能存在不完整，有问题可以回复我。。




欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1