wangEditor富文本编辑器插入高亮代码入库,前端页面读取后展示的代码不高亮问题解决方案……
wangEditor富文本编辑器基于javascript和css开发的,轻量、简洁、易用、开源免费,非常好用!值得推荐。
如果还不知道如何使用和安装请到官网查看手册wangEditor官网:http://www.wangeditor.com/ ,这里就不再次详细讲解了,我直接说在使用中踩的坑。
最近自己开发了一个cms管理系统,文章内容编辑区就用到了wangEditor,在内容区域插入开发代码如JavaScript等代码时,在wangEditor编辑器里的代码明明是高亮的,入库后在前端页面读取展示出来的竟然不高亮,当时认为是前端没有引入wangEditor里边js文件或者css文件导致的,在引入后还不高亮,查看官网手册也没有找到解决方案,后来发现了highlightjs插件,然后在前端页面引入highlightjs的js文件和css文件即可实现代码高亮,问题终于解决了。
highlightjs插件下载网址是:https://highlightjs.org/download/。
highlightjs也可以直接用cdn加速的,直接引入一个js文件一个css文件即可:
css文件:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
js文件:
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
以上链接为参考(cdn加上地址会更新),新的链接地址需要到highlightjs网获取。