ckeitor和syntaxhighlight代码高亮，我的方案v1
2010-12-24 阅读 172
首先声明，该思路已经实现。其次，这是按照当前项目的实际需要进行设计，如需使用在其他方案中，请酌情修正。
在当前项目中，使用ckeditor对日志进行编辑修改。将其显示在日志显示页面中，并要求对相应的代码使用syntaxhighlight代码高亮。
关于ckeditor，并没有太多想说的，毕竟这个在网上有太多的文章说明了。不过，我还是建议在它的官网（）查看相关手册，否则可能会走不少弯路。经过编辑之后的html代码，可以直接保存在数据库中。到此为止，html的编辑、储存、显示都有了，如果排除代码的高亮显示的话，就是这样了。
syntaxhighlight代码高亮显示。其实syntaxhighlight本身和ckeditor没有任何直接关系。在任何一个html代码的页面里，你都可以引入syntaxhighlight来实现页面中代码的高亮显示。换句话说，syntaxhighlight在页面中引入css、js，通过它们的共同作用，将高亮的样式加载在需要的代码上。
明白了这些，再去结合ckeditor。其实就是使用ckeditor的html编辑功能，在需要高亮显示的代码段上，加入特定的格式，以便于syntaxhighlight可以识别，并将高亮样式加入。这里的特定格式可以直接手写，推荐使用插件完成。
步骤：
1. 数据库设计text来存html
2. 配置ckeditor，可以编辑html，并存入数据库
3. 配置ckeditor的syntaxhighlight代码高亮插件，
4. 需要显示高亮代码的页面，载入相应的css、js
5. 很多朋友做到第四步，就终结了，但ckeditor自动转义html代码的问题很是麻烦，后面详述
参考：
1. ckeditor，参考
2. syntaxhighlight，可以使用原版+自己书写，不过我还是建议使用
上面这些，其实是网上到处可以查到，最终总结出来的。但当我们要插入高亮显示的xml类（html）、任何包含尖括号的代码时，对于尖括号的转义，使得插件没有办法正常工作。
对于上面的问题，我做了如下工作：
1. syntaxhighlight插件，插入code进入编辑器的时候，将正反尖括号 < > 替换为全角尖括号
2. 包含全角尖括号的代码，存入数据库
3. 再次编辑的时候，直接读取全角尖括号载入编辑器进行编辑
4. 在页面显示日志内容的时候，将全角尖括号替换为<；和>；
5. 打完收工
其实就是为了应付ckeditor对html代码的转义和自动整理，将尖括号变为全角的符号。其实，还有朋友对ckeditor进行配置，不去转义、忽略特定格式代码。尽管各有千秋，我还是认为我高一筹，哈哈哈。
ckeitor syntaxhighlight 代码高亮
更新于 2023年03月28日
