ECMS集成Kindeditor

前言

非常讨厌ECMS默认的HTML编辑器，于是上网下载了一个kindeditor-4.1.11版替换原始的编辑器，并整合了Ueditor1.4.3.1的代码高亮，理论上适用于任意ECMS版本。

1、下载文件

点击此处下载Kindeditor-4.1.11完整版本

2、上传Kindeditor

将kindeditor-4.1.11文件夹通过FTP软件上传到网站的根目录即可！

3、字段设置

进入ECMS后台，点击上方的“系统”——左侧的“管理数据表”，找到对应的系统数据表，点击右侧的“管理字段”，在“newstext”字段的右方点击“修改”，在“输入表单替换html代码”处用以下代码代替原始代码即可，要注意将代码中的529600.net改为自己的域名路径：

<div style="background:#fff;">
<script src="http://529600.net/kindeditor-4.1.11/kindeditor-all.js" type="text/javascript"></script>
<script src="http://529600.net/kindeditor-4.1.11/lang/zh-CN.js" type="text/javascript"></script>
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="newstext"]', {
cssPath : 'http://529600.net/kindeditor-4.1.11/plugins/code/prettify.css',
allowFileManager : true
});
});
</script>
<textarea name="newstext" style="width:100%;height:300px;visibility:hidden;"><?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[newstext]))?></textarea>
</div>

4、加入高亮JS

删除plugins/code/prettify.css，然后点击此处下载文件，放在plugins/code目录下：

5、模板设置

进入ECMS后台，点击上方的“模板”，再点击左侧的“内容模板”中的“管理内容模板”，修改对应的内容模板，在</head>之前插入以下代码：

<link href="[!--news.url--]kindeditor-4.1.11/plugins/code/shCoreDefault.css" rel="Stylesheet" type="text/css" /><!--kindeditor高亮1-->
<script src="[!--news.url--]kindeditor-4.1.11/plugins/code/shCore.js" type="text/javascript"></script><!--kindeditor高亮1-->

在</body>之前插入以下代码：

<!--kindeditor高亮2-->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<!--kindeditor高亮2-->

6、更改类别

将kindeditor-all.js里面的：

html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';

改为：

html = '<pre class="brush:' + type + ';toolbar:false">\n' + K.escape(code) + '</pre> ';

再将：

'<div style="padding:10px 20px;">',
'<div class="ke-dialog-row">',
'<select class="ke-code-type">',
'<option value="js">JavaScript</option>',
'<option value="html">HTML</option>',
'<option value="css">CSS</option>',
'<option value="php">PHP</option>',
'<option value="pl">Perl</option>',
'<option value="py">Python</option>',
'<option value="rb">Ruby</option>',
'<option value="java">Java</option>',
'<option value="vb">ASP/VB</option>',
'<option value="cpp">C/C++</option>',
'<option value="cs">C#</option>',
'<option value="xml">XML</option>',
'<option value="bsh">Shell</option>',
'<option value="">Other</option>',
'</select>',
'</div>',
'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
'</div>'

改为：

'<div style="padding:10px 20px;">',
'<div class="ke-dialog-row">',
'<select class="ke-code-type">',
'<option value="java">Java</option>',
'<option value="php">PHP</option>',
'<option value="html">HTML</option>',
'<option value="css">CSS</option>',
'<option value="js">JavaScript</option>',
'<option value="xml">XML</option>',
'<option value="shell">Shell</option>',
'<option value="sql">SQL</option>',
'</select>',
'</div>',
'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
'</div>'

7、更新缓存

要确认已经更新了缓存，如果没有出效果估计是缓存没清理干净，大可以换一个浏览器试试！