wangEditor代码高亮富文本编辑器

前言

需要一个可以编辑代码展示的富文本编辑器，对比其他的富文本编辑器，最后选择了wangEditor。原因：小巧且能满足我的需求

1.创建编辑器

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文章内容<em>*</em></label>
        <div class="layui-input-block">
	    <!-- 编辑框 -->
	    <div id="editor">  </div>
	</div>
</div>

<script type="text/javascript" src="__BASE__/js/plugins/wangEditor/wangEditor.js"></script> //引入js

<script type="text/javascript">
	var E = window.wangEditor
	var editor = new E('#editor')
	editor.customConfig.uploadImgServer = "{:url('uploadArticleImage')}"
	editor.customConfig.uploadImgMaxLength = 1 //一次上传多少图片
	editor.customConfig.uploadFileName = 'image' //上传名称
	editor.customConfig.debug = false //调试模式
        //接口返回和他制定的不一样，所以调用自定义
       	editor.customConfig.uploadImgHooks = {
		customInsert: function (insertImg, result, editor) {
			if(result.code== 200){
				var url = result.data.url;
				insertImg(url)
			}else{
				layer.msg(result.msg, {time:2000, icon:5});
			}
		}
	}
   editor.create()
</script>

前台页面展示需要引入 wangEditor.css，才有效果，其他css效果可以自己定义

效果图如下：

 2.代码类型添加

由于wangEditor3.0去除了代码类型选择，需要自己修改下代码。

参考链接 https://blog.csdn.net/qq_17813937/article/details/84498816

3.代码高亮

我们采用highlight插件，效果图如下：

 参考网站 https://www.kancloud.cn/wangfupeng/wangeditor/65742

4.总结

经过以上述的操作wangEditor编辑器就完成了