使用wangEditor-CDN方式

引入

<!-- wangEditor -->
<!-- <script type="text/javascript" src="/wangEditor-5.1.1/index.js"></script>
<link rel="stylesheet" type="text/css" href="/wangEditor-5.1.1/style.css" /> -->

<script type="text/javascript" src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" />

<!-- 最新的 layui 核心文件 -->
<!-- <script type="text/javascript" src="/layui-2.6.13/layui.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="/layui-2.6.13/css/layui.css" /> -->
<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />

JS配置

配置

注：文件体积更改第一位数

例： maxFileSize: 10 * 1024 * 1024,

文件体积更改为 20M

maxFileSize: 20 * 1024 * 1024,

    // CDN 引入 css 和 js
    const { createEditor, createToolbar, IEditorConfig, IDomEditor } = window.wangEditor;
    // IEditorConfig.placeholder = '请输入内容...'

    // 编辑器配置
    const editorConfig = { MENU_CONF: {} };
    editorConfig.placeholder = '请输入内容'
    editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时，即触发
        // console.log('content', editor.children)
        // console.log('html', editor.getHtml())
    }
    // 上传图片的配置
    editorConfig.MENU_CONF['uploadImage'] = {
        // 服务端地址
        server: '/admin/upload/image',
        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
        // fieldName: 'your-custom-name',

        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 10 * 1024 * 1024, // 10M

        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 10,
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,
        // 上传之前触发
        onBeforeUpload(file) {
            // file 选中的文件，格式如 { key: file }
            return file

            // 可以 return
            // 1. return file 或者 new 一个 file ，接下来将上传
            // 2. return false ，不上传这个 file
        },
        // 上传进度的回调函数
        onProgress(progress) {
            // progress 是 0-100 的数字
            console.log('progress', progress)
        },
        // 单个文件上传成功之后
        onSuccess(file, res) {
            console.log(`${file.name} 上传成功`, res)
        },
        // 单个文件上传失败
        onFailed(file, res) {
            console.log(`${file.name} 上传失败`, res)
        },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {
            console.log(`${file.name} 上传出错`, err, res)
        },

    };

    // 上传视频的配置
    editorConfig.MENU_CONF['uploadVideo'] = {
        server: '/admin/upload/video',
        // form-data fieldName ，默认值 'wangeditor-uploaded-video'
        // fieldName: 'your-custom-name',

        // 单个文件的最大体积限制，默认为 10M
        maxFileSize: 50 * 1024 * 1024, // 50M

        // 最多可上传几个文件，默认为 5
        maxNumberOfFiles: 3,

        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['video/*'],

        // 跨域是否传递 cookie ，默认为 false
        withCredentials: true,
        // 上传之前触发
        onBeforeUpload(file) {
            // file 选中的文件，格式如 { key: file }
            return file

            // 可以 return
            // 1. return file 或者 new 一个 file ，接下来将上传
            // 2. return false ，不上传这个 file
        },
        // 上传进度的回调函数
        onProgress(progress) {
            // progress 是 0-100 的数字
            console.log('progress', progress)
        },
        // 单个文件上传成功之后
        onSuccess(file, res) {
            console.log(`${file.name} 上传成功`, res)
        },
        // 单个文件上传失败
        onFailed(file, res) {
            console.log(`${file.name} 上传失败`, res)
        },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {
            console.log(`${file.name} 上传出错`, err, res)
        },
    };

    // 工具栏配置
    const toolbarConfig = {}

使用

<div class="layui-container">
    <div id="toolbar-container-1"></div>
    <div id="editor-container-1" style="height:80vh; "></div>
    <button type="button" id="editor" class="layui-btn" >提交</button>
</div>

<script type="text/javascript">
    // 创建编辑器1
    const editor = createEditor({
        html: '{$ediHtml | raw}', // 从 editor.getHtml() 获取的 html 内容
        selector: '#editor-container-1',
        mode: 'default',
        config: editorConfig,
    });
    // $('w-e-textarea-1').innerHTML = '';
    // 创建工具栏1
    const toolbar1 = createToolbar({
        editor: editor,
        selector: '#toolbar-container-1',
        config: toolbarConfig,
        mode: 'default'
    });

    $('#editor').on('click',function() {
        const html = editor.getHtml();
        console.log(html);
        myAjax('post', '/admin/about/updateSubmit', {
            html,
        }).then((e) => {
            console.log('then', e);
            layui.use('layer',function(){
                layer.msg(e.msg);
            }); 
        }).catch((e) => {
            console.log('catch', e);
        });
    })
</script>