fzyEditor

<link rel="stylesheet" href="css/preview.css" media="all" />
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>

layui.use('fzyEditor', function () {
        var fzyEditor = layui.fzyEditor;

        const editor = fzyEditor.render('editor',{
            theme:'light',
            enabled:true,
            uploadFile:{
                url:'/data/uploadFile.json',//测试接口
                data:{}
            },
            uploadImage: {
                url:'/data/uploadFile.json',//测试接口
                data:{}
            },
            // uploadAudio:{
            //     url:'/data/uploadFile.json', //测试接口
            //     data:{}
            // },
            player: 'https://www.fengzhiya.cn/player/index.html?url=',//该地址不一定能行,自行配置一个能播放mp4/m3u8的dplayer播放器
        });
    });

<div id="demo1"></div>
<script>
layui.use('fzyEditor',function(){
    const fzyEditor = layui.fzyEditor;
    const editor = fzyEditor.render('demo1',{
        height:200,
        tools:['undo','redo','abc',//自定义abc工具
            '|',
            'bold', 'italic', 'underline', 'del','indent',
            '|',
            'h1', 'h2', 'h3', 'h4', 'h5', 'h6','ucfirst','uppercase','lowercase',
            '|',
            'hr','codeBlock','link','face','img','quote','orderedList', 'unorderedList',
            '|',
            'clear','help','about'],
        //同名会覆盖已有的工具栏（如果没有自定义同名事件，会按照已有事件执行，只是换了个图标）
        autoTool:{
            abc:`<div class="-fzy-tool-item" title="弹出" editor-event="abc"><i class="layui-icon layui-icon-error"></i></div>`,
        },
        //自定义工具事件
        //同名会覆盖已有的工具栏方法
        autoToolbarHandles: {
            abc:function (othis){
                //othis可选，返回当前工具dom
                //editor.cm 是内置CodeMirror的所有方法和接口的返回，可以供自定义使用
                editor.cm.replaceSelection(`{abc aaa="123"/}`);
            }
        },
        //自定义事件解析
        autoParser:function (str){
            if(str.indexOf('{abc')!==-1){
                str = str.replace(/{abc aaa="([\s\S]*?)"\/}/g,'<div>$1</div>');
            }
            return str; //不管是否有自定义内容，请必须返回，否则预览将不会显示
        },
    });
 
});
//注意：一定要按照格式自定义，否则会出错，editor-event="abc" 非常重要，涉及到事件名，否则不会被执行
</script>