wangEditor官网：https://doc.wangeditor.com/

1.实现效果如下图中的 “工单问题描述”

2.页面代码，只截取“工单问题描述”这部分前端代码，下面的textarea多行文本框作为隐藏校验，“全屏”插件需要另外引入静态文件

<link rel="stylesheet" href="/root/assets/module/wangEditor/release/wangEditor.css"/><link rel="stylesheet" href="/root/assets/module/wangEditor/fullscreenplugin/wangEditor-fullscreen-plugin.css"/>

  <tr><td colspan="2" style="background-color: #f2f2f2; color: #666;  text-align: right;"><span class="layui-label-required">*</span>工单问题描述</td><td colspan="10"><div id="div1"></div><textarea class="layui-textarea layui-hide" id="repairDescription" name="repairDescription"placeholder="限500字以内" maxlength="500"onchange="this.value=this.value.substring(0, 2000)" onkeydown="this.value=this.value.substring(0, 2000)" onkeyup="this.value=this.value.substring(0, 2000)"lay-verify="required" style="width:100%; height:200px;"></textarea></td></tr>

<script type="text/javascript" src="/root/assets/module/wangEditor/release/wangEditor.js"></script>
<script type="text/javascript" src="/root/assets/module/wangEditor/fullscreenplugin/wangEditor-fullscreen-plugin.js"></script>

 

var E = window.wangEditor;var editor = new E('#div1');var $text1 = $('#repairDescription');editor.customConfig.onchange = function (html) {// 监控变化，同步更新到 textarea$text1.val(html)};editor.customConfig.zIndex = 100editor.customConfig.uploadImgServer = '/repair/repairinfo/uploadRichText3';//controller会用到，可以随便设置，但是一定要与controller一致editor.customConfig.uploadFileName = 'file';editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;editor.customConfig.menus = ['head',  // 标题'bold',  // 粗体'fontSize',  // 字号'fontName',  // 字体'italic',  // 斜体'underline',  // 下划线'strikeThrough',  // 删除线'foreColor',  // 文字颜色'backColor',  // 背景颜色'link',  // 插入链接'list',  // 列表'justify',  // 对齐方式'quote',  // 引用'emoticon',  // 表情'image',  // 插入图片'table',  // 表格// 'video',  // 插入视频'code',  // 插入代码'undo',  // 撤销'redo'  // 重复];// 隐藏“网络图片”tabeditor.customConfig.showLinkImg = false;editor.customConfig.emotions = [{// tab 的标题title: '默认',// type -> 'emoji' / 'image'type: 'image',// content -> 数组content: [{alt: '[草泥马]',src: '/root/assets/images/emotions/shenshou_thumb.gif'},{alt: '[蛋糕]',src: '/root/assets/images/emotions/cake.gif'},{alt: '[钟]',src: '/root/assets/images/emotions/clock_thumb.gif'},{alt: '[来]',src: '/root/assets/images/emotions/come_thumb.gif'},{alt: '[给力]',src: '/root/assets/images/emotions/geili_thumb.gif'},{alt: '[神马]',src: '/root/assets/images/emotions/horse2_thumb.gif'},{alt: '[互粉]',src: '/root/assets/images/emotions/hufen_thumb.gif'},{alt: '[吃惊]',src: '/root/assets/images/emotions/j_thumb.gif'},{alt: '[礼物]',src: '/root/assets/images/emotions/liwu_thumb.gif'},{alt: '[太开心]',src: '/root/assets/images/emotions/mb_thumb.gif'},{alt: '[钟]',src: '/root/assets/images/emotions/rabbit_thumb.gif'},{alt: '[害羞]',src: '/root/assets/images/emotions/shamea_thumb.gif'},{alt: '[呵呵]',src: '/root/assets/images/emotions/smilea_thumb.gif'},{alt: '[嘻嘻]',src: '/root/assets/images/emotions/tootha_thumb.gif'},{alt: '[可爱]',src: '/root/assets/images/emotions/tza_thumb.gif'},{alt: '[威武]',src: '/root/assets/images/emotions/wg_thumb.gif'},{alt: '[阴险]',src: '/root/assets/images/emotions/yx_thumb.gif'},{alt: '[猪]',src: '/root/assets/images/emotions/pig.gif'}]}];editor.create();E.fullscreen.init('#div1');// 初始化 textarea 的值$text1.val(editor.txt.html());