[JavaScript知识库]Layui富文本编辑器，文章编辑器

富文本编辑器

分为两种，一种Layui自带的，一种通用的

一、layUI自带的

html

<form class="layui-form" id="form_1" action="">
<div class="layui-form-item layui-form-text">
   <textarea class="layui-textarea " placeholder="请输内容" 
     name="content" lay-verify="content"
     id="editor_demo"></textarea>
</div>
</form>

js

layui.use(['form', 'layedit', 'layer'], function () {
        var form = layui.form,
            layedit = layui.layedit,
            layer = layui.layer;
        //创建一个编辑器
        var editIndex = layedit.build('editor_demo');

        form.on('submit(editor)', function (data) 
            $.post('/test/addContent', {
                content: data.field.content,
            }, function (msg) {
                if (msg === '200') {
                    layer.alert("添加成功", {
                        title: '最终的提交信息',
                        yes: function (index) {
                            $('#form-1')[0].reset(); //内容提交之后清空文本框，重新定义这个模板
                            editIndex = layedit.build('editor_demo');
                            layer.close(index);
                        }
                    });
                }
            });
            return false;
        });
   });     

用法可参考：https://blog.csdn.net/weixin_44227858/article/details/108812096

二、通用型

官方：https://www.wangeditor.com/

JS源码：https://unpkg.com/wangeditor@4.7.10/dist/wangEditor.min.js

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
	const E = window.wangEditor
 	const editor = new E('#div1')
	// 或者 const editor = new E(document.getElementById('div1'))
	editor.create()
</script>

npm下载

npm i wangeditor --save

import E from "wangeditor";
const editor = new E("#div1");
editor.create();