当前位置：阳诡子 > 建站 > 正文

ECMS集成Kindeditor

时间：2020-11-15 来源：作者：

前言

非常讨厌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>之前插入以下代码：

1 2	`<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里面的：

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

改为：

1	`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、更新缓存

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

来顶一下

返回首页

相关文章