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編輯器就完成了