wangEditor编辑器代码高亮插件

2018/08/20  |  工具下载  |  by Leaf  |  浏览 31

wangEditor编辑器代码高亮插件,此插件基于jquery和highlightjs库开发而成,适用于wangEditor3.x,使用方法非常简单,插件包内配有详细使用方法,简单易懂,可快速集成上手。
软件大小 183KB 软件语言 英文 软件类型 本站原创
授权方式 免费软件 更新时间 2018/08/20 运行环境 Win/Linux


此插件基于jquery和highlightjs库开发而成,适用于wangEditor3.x,使用方法很简单,步骤如下:

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

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

图1

图2

图3


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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="wangEditor/js/wangEditor.js"></script>

<link type="text/css" rel="stylesheet" href="wangEditor-highlight/styles/railscasts.css">
<link type="text/css" rel="Stylesheet" href="wangEditor-highlight/styles/highlight-wangEditor.css">
<script type="text/javascript" src="wangEditor-highlight/highlight.pack.js"></script>
<script type="text/javascript" src="wangEditor-highlight/highlight-wangEditor.min.js"></script>


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

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

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


温馨提示:如果需要在其他页面显示已经渲染过的代码,请根据需要引入对应的样式资源文件。

本插件为本站原创软件,欢迎交流讨论;如需转载,请注明出处!




手机扫码下载