javascript - 求ckeditor在线编辑器代码高亮显示方案。-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 求ckeditor在线编辑器代码高亮显示方案。

伊谢尔伦 2017-04-10 13:11:59

[JavaScript讨论组]

587

如题，方案或者插件都可以，好看点就行!

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(2)

迷茫2017-04-10 13:13:59 2楼

比如
http://ckeditor.com/addon/codemirror

赞 +0

添加回复

巴扎黑2017-04-10 13:13:59 1楼

通过

CKEDITOR.instances.xxx.getData()\\xxx为textarea的name属性

可以获得ckeditor编辑好的html代码，然后可以通过highlight.js等前端代码高亮工具进行着色，不过生成的html通过CKEDITOR.instances.xxx(textarea的name属性).setData(data)写回到ckeditor里面还是显示不了，所以可以像很多markdown编辑器一样弄一个预览框来显示高亮后的整篇文章的预览效果，比如sf的评论框和马克飞象一样，对代码高亮的highlight的核心代码如下：

<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
$("#ckeditor").keyup(function(event){
    var $doc = $(CKEDITOR.instances.ckeditorName.getData());
    $('code', $doc).each(function(i, e) {
        hljs.highlightBlock(e);
    });
    $output.innerHTML = $doc[0].outerHTML;
});

大致上是这么个意思，至于楼上说的codemirror，刚才我试验了一下，可能是我太笨了，结果没有高亮显示，只是高亮了ckeditor的查看源码部分的html，o(╯□╰)o

除此之外，ckeditor还有一个插件叫syntaxhighlighter也是用来生成代码高亮的，不过貌似需要后台支持，如果可以在后台支持中添加也是一个不错的选择。

如果有好的解决方法，也希望你能告诉我

赞 +0

添加回复