织梦整合编辑器Kindeditor 4.1.4 GBK+UTF一键安装

dedecms织梦自带的ckeditor编辑器 体态臃肿，加载速度不够轻快，最主要的是代码无法高亮显示，经过几天的摸索和研究，目前已比较完美地实现以上功能。网上有用kindeditor和Syntax Highlighter整合进行代码高亮显示的，Syntax Highlighter 功能强大，语法着色美观，还有行号显示。唯一不足的是页面加载的 JS体积比kindeditor自带的Prettify插件大6-7倍，Prettify的压缩后只有13kb，相比Syntax Highlighter 高达70kb（压缩后）的体积，真是小巫见大巫了！！ 权衡之下，决定采用kindeditor自带的Prettify来整合。

　

　　效果图

 

　　KindEditor 主要特点

　　快速：体积小，加载速度快

　　开源：开放源代码，高水平，高品质

　　底层：内置自定义 DOM 类库，精确操作 DOM

　　扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能

　　风格：修改编辑器风格非常容易，只需修改一个 CSS 文件

　　兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

　　关于织梦自带的编辑器替换为kindeditor，大家可以下载我整理后的一键安装包（兼容最新的dedecms v5.7 sp1、dedecms v5.7 sp2）：

　　下载地址：kindeditor 4.1.4  for dedecms 一键安装

链接：https://pan.baidu.com/s/1uj_EHL3TAUjz5g9gAcpccg         提取码：6bw0

 

　　安装使用

　　1、解压后，把include文件夹覆盖到网站相同目录，选择覆盖原文件即可。

　　系统后台中设置[系统]-[核心设置]，在“Html编辑器（ckeditor,需要fck的用户可以去官网下中设置：kindeditor

　　2、前台模板页（比如我的是aricle_aritlce.htm）需引入以下几个文件：

　　<link type="text/css" rel="stylesheet" href="/include/kindeditor/plugins/code/prettify.css"/>

　　<script type="text/javascript" src="/include/kindeditor/plugins/code/prettify.js"></script>

　　然后，在你文章模板页的</body>前添加这一句：

　　<script>prettyPrint();</script>

　　注意，一定要放在body的结束符之前，如果在页面头部声明是没效果的。

　　3、代码自动换行（其实插件里我已修改好了，此项可以忽略）

　　修改include\kindeditor\plugins\code\prettify.css 里的样式：

　　pre.prettyprint {

　　border: 0;

　　margin-left: 2em;

　　padding: 0.5em;

　　font-size: 90%;

　　line-

　　display: block;

　　font-family: "Verdana", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

　　margin: 1em 0px;

　　white-space: pre-wrap;

　　

　　background:#ffffff;

　　border-bottom:#dcdddd 1px solid;

　　border-top:#dcdddd 1px solid;

　　border-right:#dcdddd 1px solid;

　　border-left: 3px solid lime;

　　}

　　本机测试成功，时间原因本站暂缓更换，好东西先收藏起来。大家喜欢的话就支持一下，有什么问题在下面评论留言 。

插件下载说明

未提供下载提取码的插件，都是站长辛苦开发，联系客服或站长有偿获得!

织梦二次开发QQ群

本站客服QQ号：862782808（点击左边QQ号交流），群号(383578617) 如果您有任何织梦问题，请把问题发到群里，阁主将为您写解决教程！

转载请注明： 织梦模板 » 织梦整合编辑器Kindeditor 4.1.4 GBK+UTF一键安装