kindeditor

除了CK，Kindeditor还是比较好用的在线编辑器，不过kd有个严重的问题就是插入代码之后再修改会有转码问题，最近研究了下之后，找到了很好的解决方案，分享如下： 1、在编辑器插入上传的时候进行二次编码转义：（来自 @红薯 的解决方案）： /** * 格式化HTML文本 * * @param content * @return */ public String rhtml(String content) { if (StringUtils.isBlank(content)) return content; String html = content; html = StringUtils.replace(html, "&", "&"); html = StringUtils.replace(html, "<", "<"); html = StringUtils.replace(html, ">", ">"); return html; } 2、经过的二次转义的内容在修改编辑的时候就不会存在问题了，但在显示的时候我们需要进行一次反转义工作： /** * 格式化HTML文本 * * @param content * @return */ public String backToHtml(String content) { if (StringUtils.isBlank(content

kindeditor4.x代码高亮功能默认使用的是prettify插件，prettify是Google提供的一款源代码语法高亮着色器，它提供一种简单的形式来着色HTML页面上的程序代码，不过因为SyntaxHighlighter的应用非常广泛，所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件。 1.第一步首先修改kindeditor代码高亮写入pre标签时的class类名： 打开/kindeditor4/plugins/code/code.js，找到类似于这样一行： html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code)'</pre>'; 改为以下的内容： //html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) +'</pre>'; //将代码高亮替换为SyntaxHighlighter插件需要的类名 html = '<pre class="brush:' + type + ';">\n' + K.escape(code) +'</pre>'; //此处为将原有写法注释，上一行为修改后的内容。 2.自定义页面中kindeditor中选择“插入代码”的图标，下拉菜单中的语言选择项：

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，且兼容主流浏览器。与ueditor这样的大块头相比，KindEditor的优点是不言而喻的--它体积小，加载速度快，功能也十分丰富。我在 WBlog 主要应用了KindEditor的在线编辑功能和文件上传功能。下面是KindEditor在thinkphp模板上的使用方法。 kindeditor版本：kindeditor-4.1.1 kindeditor的位置：根目录\Public\kindeditor kindeditor在线编辑器的使用方法 在需要使用编辑器的模板上引入kindeditor-min.js、zh_CN.js文件及运行相应的代码 01 <scriptcharset="UTF-8"src="/Public/kindeditor/kindeditor-min.js"></script> 02 <scriptcharset="UTF-8"src="/Public/kindeditor/lang/zh_CN.js"></script> 03 <script> 04 05 var editor; 06 KindEditor.ready(function(K) { 07 editor = K.create('textarea[name="content"]', { 08

首先需要在页面中引入所需FE文件： 两个js和一个css文件是必须要引用的文件； shCore.js是syntaxhighlighter插件的基础代码； shAutoloader.js作用 是 syntaxhighlighter插件的代码高亮显示时自动加载所需文件；但是如果目录不正确的话，就会加载失败，解决方法如下SyntaxHighlighter.autoloader.apply()中给出js文件的位置， <?php //syntaxhighlighter代码高亮显示需要加载的js/css====================begin Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . "/js/syntaxhighlighter/styles/shCoreDefault.css"); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shCore.js'); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts

/** * kindeditor * 源文件 : www/js/kindeditor/ * 功能 : 富文本编辑器，优于ckeditor，支持多种显示插入代码的样式。 * 形式 : 现以components的方式整合到yii中(修改自其自带的php demo) * 目录 : www/protected/componts/editor/ (整合进yii后的基础目录) * www/protected/componts/editor.php (接口文件) * www/js/kindeditor/ (源文件路径) * www/protected/controllers/EditoruploadController.php (处理文件的调用地址) * 案例 : www/protected/views/post/_form.php */ 首先根据kindeditor的demo中的例子，将kindeditor添加到表单中： <div class="row"> <?php echo $form->labelEx($model, 'content'); ?> <?php echo CHtml::activeTextArea($model, 'content', array('id'=>'editor_id')); ?> <?php echo $form->error($model, 'content