layui使用wangEditor富文本插件

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 = 100
        editor.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'  // 重复
        ];
        // 隐藏“网络图片”tab
        editor.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());