wangEditor v3集成highlight实现代码高亮

资源分享 JavaScript 转载
Uiaoin 2019-07-03 3743

wangEditor v3版本没有了代码高亮，代码样式难看异常，好在网上有大佬对wangEditor.js插入代码模块进行了覆盖重写，使得wangEditor v3可以像v2一样拥有代码高亮功能。这里将大佬开发的代码以及使用方法分享给大家。

1、因本插件对wangEditor自带插入代码模块进行了覆盖重写，所以首先关闭wangEditor自带插入代码功能，方法如下：

1.打开wangEditor.js源码，大致第549行左右，找到menus配置； 
2.删除"code"配置，以关闭wangEditor自带插入代码功能。



2、必须在wangEditor.js之后，按照如下顺序引入wangEditor-highlight-plugin相关资源文件。例如：

  1. <!-- wangEditor资源 -->
  2. <script type="text/javascript" src="js/jquery.js"></script> 
  3. <script type="text/javascript" src="wangEditor/js/wangEditor.js"></script> 
  5. <!-- highlight主题CSS -->
  6. <link type="text/css" rel="stylesheet" href="highlight/styles/railscasts.css"> 

  8. <!-- wangEditor v3代码高亮插件CSS -->
  9. <link type="text/css" rel="Stylesheet" href="highlight-wangEditor.css"> 

  11. <!-- highlight库JS -->
  12. <script type="text/javascript" src="highlight/highlight.pack.js"></script> 

  14. <!-- wangEditor 3代码高亮插件JS -->
  15. <script type="text/javascript" src="highlight-wangEditor.min.js"></script>


3、在editor.create()之后激活代码高亮插件：E.highlight.init(editor); 例如：

  1. var E = window.wangEditor
  2. var editor = new E("#editor")
  3. editor.create()
  4. E.highlight.init(editor)    //editor 将编辑器对象作为参数传入进行初始化


4、插入代码时，选择对应的代码类型，即可实现代码高亮渲染。



5、大家可以根据自己的喜好选择highlight主题CSS。

大佬写的插件如下：

wangEditor 3代码高亮插件CSS

wangEditor 3代码高亮插件JS


文章转载于：http://www.aitlu.com/detail/20188/NjU4.html

加载更多