因为需要,wss 默认的kindeditor 似乎不太“够”用,所以转投百度开源的富文本编辑器ueditor。特编文以记录各个文件的编辑过程!wss 的版本是1.3.2。

  1. 编辑内容展示 首先,按照官方文档的编辑内容展示 部分,需要使用uparse 在展示页面中对ueditor的产出的编辑数据,进行解析和转换,以呈现不同的效果。
//uParse的语法
//uParse(cssSelector,\[options\])

在wss 根目录的head.php 文件head 部分加入javascript:

 uParse('#content_detail', {
    rootPath: 'editor/'
}) 
  1. 以“文档” 部分为例

    • file_edit.php

      根据百度官方的demo,需要在调用编辑器的页面载入ueditor 的几个关键文件并实例化:

        这里写你的初始化内容 





        var ue = UE.getEditor('container'); 

    在wss 上的处理:

    *   找到

         var editor;
                KindEditor.ready(function(K) {
                        editor = K.create('#tk\_doc\_description', {
                    width : '96%',
                    height: '500px',
                    items:\[
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
                'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image',
                'flash', 'media', 'insertfile', 'table', 'hr', 'map', 'code', 'pagebreak', 'anchor', 
                'link', 'unlink', '|', 'about'
        \]
        });
                }); 

        替换为:

         var ue = UE.getEditor('tk\_doc\_description'); 

    *   找到:

        <?php echo $row\_Recordset1\['tk\_doc_description'\]; ?>

        替换为:

        <?php echo $row\_Recordset1\['tk\_doc_description'\]; ?>

        PS:采用了script标签作为编辑器容器对象,并设置了其类型是纯文本,从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。

*   file_view.php

    加入uparse 解析转义的cssSelector

    找到

         null) { ?>



    替换为

         null) { ?>



    也就是加入了div

Comments

2014-05-24