首先是三個選項卡 用的是layui.layer.open()開啟的彈窗

其次選項卡里有textarea
textarea又是用form表單提交的 富文字編輯器的內容

這裡我我們需要注意如下幾點內容
1.富文字編輯器的內容 不能寫在上面的已經定義過的layui.use的裡面，要在layer.open()後面單獨寫一個layui.use

2.如果三個選項卡都需要用到富文字編輯器 需要在三個選項卡的富文字編輯器上的id上每個都單獨定義一個 載入富文字編輯器的程式碼 這樣子三個富文字編輯器的樣式就都有了

3.傳值的時候 不能直接在下面直接轉義 要在外面轉義 如圖，我是在校驗表單的時候轉義的

這裡放程式碼

//載入富文字編輯器 layui.use(['layedit', 'form'],function() { var layedit = layui.layedit; //建立一個文字編輯器 layeditIndex = layedit.build('context', { //選擇需要的元素 tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right'], height:155 }); layeditIndex2 = layedit.build('context2', { //選擇需要的元素 tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right'], height:155 }); layeditIndex3 = layedit.build('context3', { //選擇需要的元素 tool: ['strong', 'italic', 'underline', 'del', '|', 'left', 'center', 'right'], height:155 }); });

//富文字編輯器 取值元素 var layeditIndex var layeditIndex2 var layeditIndex3

/** * 檢查表單引數是否合法 * @returns {} 可以提交的表單引數 */ function checkBeforeSubmit() { layui.layedit.sync(layeditIndex) //公告 layui.layedit.sync(layeditIndex2) //廣告 layui.layedit.sync(layeditIndex3) //新聞 const formData = $(commitForm).serializeObject() console.log("你要提交的表單是",commitForm) // 普通欄位 if (!formData.title ) { Layer.error('內容未填寫完整') return } return formData }

<!--廣告內容--> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">廣告內容</label> <div class="layui-input-inline" style="width: 97%;height: 200px"> <textarea name="context" id="context2" placeholder="在這裡輸入您的公告" class="layui-textarea" style="height: 100%" lay-verify="wenbenyu"></textarea> </div> </div>