发表了《WSS 富文本编辑器kindeditor 到ueditor 的替换,并实现代码高亮!》之后,虽然感觉ueditor 确实功能丰富,但为了以后方便WSS 的升级,还是直接在WSS 及Kindeditor 上作小幅度的修正来实现代码高亮。

首先,去掉默认WSS 对Kindeditor 工具栏(items)的定制:

Windows使用notepad++ 通过正则表达式替换。

var editor;
KindEditor.ready(function(K) {
editor = K.create(‘#csa_remark1’, {
width : ‘95%’,
height: ‘350px’,
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’
]
});
});

去掉这一段

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’
]

我使用的正则语句:

搜索

items\:\[.*\}\)\;

替换

\}\)\;\n\}\)\;

顺便参考官方PHP demo 手动在这些文件中加入pretty.css 及prettyPrint{} 以便给编辑器内的pre 标签定义样式。

cssPath : ‘../plugins/code/prettify.css’,

prettyPrint();

涉及的文件较多,自己手动编辑了下面的几个文件:

  • announcement_add.php
  • announcement_edit.php
  • comment_add.php
  • comment_edit.php
  • default_task_add.php
  • default_task_plan.php
  • file_add_folder.php
  • file_edit.php
  • file_edit_folder.php
  • log_add.php
  • log_edit.php
  • project_add.php
  • project_edit.php

Kindeditor 在textarea里设置HTML内容来可实现编辑,需要从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容,所以必须转换HTML特殊字符(>,<,&,”)。

而WSS 在以下的几个文件中没有进行转义,所以需要在textarea 标签中手动加入PHP htmlspecialchars() 函数

  • file_edit.php
  • file_edit_folder.php
  • log_edit.php
  • default_task_plan.php

如default_task_plan.php 文件:

<?php echo $row_Recordset_task[‘csa_remark1’]; ?>

加上htmlspecialchars() 函数后

<?php echo htmlspecialchars($row_Recordset_task[‘csa_remark1’]); ?>

完成编辑器的编辑后,就到了前端内容显示的修正了

为了方便,在WSS 的头部head.php 加入prettyPrint 样式:

再在foot.php 最后加入相关jsprettyPrint() 函数:

prettyPrint();

PS:其中log_view.php 是作为frame 加载的,所以还需在这个文件单独加入上面的css 及js prettyPrint{}

最后,简单“美化”一下显示效果

相关文件包括:

  • skin/themes/base/lhgdialog.css

    /********calendar*******/

    img {border: none;}
    li {list-style: none;}

    去掉li list-style 的定义:

    /********calendar*******/

    img {border: none;}
    /*li {list-style: none;}*/

    并为定义了日历样式的.day_main 加上宽度

    .day_main{height:105px; width:105px; overflow:hidden; }

  • skin/themes/base/tk_style.css

    /* CSS Document */

    img {border: none;}
    ul{list-style: none; padding: 0; }
    li{list-style: none; }

    去掉list-style 的定义:

    /* CSS Document */

    img {border: none;}
    /*ul{list-style: none; padding: 0; }*/
    /*li{list-style: none; }*/
    ul{padding: 0; }

  • editor/plugins/code/pretty.css

    改为自动换行:

    pre.prettyprint {white-space: pre-wrap;}

Comments

2014-05-24