主题: 为kindsoft编辑器替换SyntaxHighlighter代码高亮,整合DEDECMS

作者: fmamcn, 发布日期: 2012-09-29 12:28:39, 浏览数: 1567
看了狼魂发表的将kindeditor中的代码高亮插件prettify换为SyntaxHighlighter
自己试了一下,总有一些问题,后来还是自己研究了一下,找了一些文档,做了一个

DeDeCMS本身的标记其不好用,更换为KindEditor后确实很不错了,但是KindEditor编辑器的代码高亮确实不怎么好看,也不怎么使用,虽然很简洁,但是功能上还是显得匮乏一些,所以就动手改了改,现在分享出来!
首先,下载本站提供的DeDeCMS一键傻瓜式安装KindEditor。详细说明请查看该页面。
我们选择SyntaxHighlighter作为代码高亮插件,修改/include/kindeditor/plugins/code/code.js
找到:
?
1
html ='

\n' + K.escape(code) +'

';
替换为:

?
1
html ='

\n' + K.escape(code) +'

';
这样是为了将prettify的类名换为SyntaxHighlighter插件需要的类名,

保存并上传覆盖原来的code.js
然后将我提供的附件上传至/include/kindeditor/plugins/code/目录,当然,你也可以传到别的目录,但是在下一步记得路径要正确!
附件:SyntaxHighlighter
好了,现在就需要修改前台模板了
在前台模板引入附件中的文件:
?
1
2

并记得在页面最末端加入以下代码:

?
1
2
3
4

好了,到这里就结束了,发篇文章看看效果吧!

详情查看:http://www.zztuku.com/Html/DedeCms/20120929_3068.html

时间: 2024-08-01 11:21:12

主题: 为kindsoft编辑器替换SyntaxHighlighter代码高亮,整合DEDECMS的相关文章

ckeditor syntaxhighlighter代码高亮插件配置分享_网页编辑器

最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合_网页编辑器

Introduction(简介) This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighligh

ckeditor syntaxhighlighter代码高亮插件,完美修复_网页编辑器

CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵 来个图 使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C

解决SyntaxHighlighter 代码高亮不换行问题的解决方法_网页编辑器

解决方法: 打开shCoreDefault.css文件,找到对.syntaxhighlighter textarea的定义,在最后加上一句:word-break:break-all !important;就ok了,意思是让代码强制换行显示. 由于每个人调用的css不同,大家可以根据自己的需要修改css

百度编辑器ueditor前台代码高亮无法自动换行解决方法

 这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题 问题描述:   在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的.   解决办法:   找到高亮代码显示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css   具体的路径根据你的uedito

百度编辑器ueditor前台代码高亮无法自动换行解决方法_网页编辑器

问题描述: 在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换行,直接超出了内容页的边界,极不美观,虽然复制是可以完整的. 解决办法: 找到高亮代码显示的css文件  /e/data/ecmseditor/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css 具体的路径根据你的ueditor做改动 找到 复制代码 代码如下: .syntaxhighlighter{width:100%!im

FCKeditor + SyntaxHighlighter 让代码高亮着色插件_网页编辑器

FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,可以最小化修改您的程序实现效果,最终效果截图: 演示网页: 下载FCKeditor + SyntaxHighlighter插件包:fck_SyntaxHighlighter打包版 下面分步介绍如何在FCKeditor环境中使用SyntaxHighlighter. 后台FCKeditor编辑器的修改 1.将包解压后,把 insertcode 文件夹上传到 FCKeditor编辑器的e

代码高亮插件SyntaxHighlighter

现在版本syntaxhighlighter_2.1.364 第一       解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题 第二   如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的.其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js,最后引入高亮显示的主题CSS,默认的为shThemeD

Windows Live Writer 实现代码高亮_网页编辑器

为了实现代码高亮,之前找了很多插件,但是效果都不是很理想.经过研究终于找到一个完美的解决方案,这个解决方案具有如下优点: 代码简洁,用<pre>标签实现代码高亮,不会生成太多Html标签. 支持多种语言,包括c#,c++,php,python等10多种语言. 扩充方便,可以通过简单二次开发实现对其它语言的支持. 使用方便,把代码复制到代码高亮转换窗口即可. 下面一步步介绍如何配置WLW+wordpress的代码高亮解决方案: 1.准备工作: 下载 precode code snippet ma