首页 > 网站制作
一言推荐::D 获取中...

dedecms更换编辑器为kindeditor 4.1.4开启代码高亮

网站制作/ 2018-05-16/

  dedecms织梦自带的ckeditor编辑器 体态臃肿,加载速度不够轻快,最主要的是代码无法高亮显示,经过几天的摸索和研究,目前已比较完美地实现以上功能。网上有用kindeditor和Syntax Highlighter整合进行代码高亮显示的,Syntax Highlighter 功能强大,语法着色美观,还有行号显示。唯一不足的是页面加载的 JS体积比kindeditor自带的Prettify插件大6-7倍,Prettify的压缩后只有13kb,相比Syntax Highlighter 高达70kb(压缩后)的体积,真是小巫见大巫了!! 权衡之下,决定采用kindeditor自带的Prettify来整合。
  
  效果图
dedecms编辑器,kindeditor,代码高亮
  KindEditor 主要特点
  快速:体积小,加载速度快
  开源:开放源代码,高水平,高品质
  底层:内置自定义 DOM 类库,精确操作 DOM
  扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能
  风格:修改编辑器风格非常容易,只需修改一个 CSS 文件
  兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera
  关于织梦自带的编辑器替换为kindeditor,大家可以下载我整理后的一键安装包(由于时间关系,只有本GBK版本,兼容最新的dedecms v5.7 sp1):
  下载地址:
  kindeditor 4.1.4 for dedecms 一键安装
  kindeditor的版本为官方最新版 4.1.4
www.oleou.com


  安装使用
  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> www.oleou.com 
  然后,在你文章模板页的</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-height: 20px;  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;  } www.oleou.com 

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

TAGS:

打赏 点赞
邮箱
验证码
昵称