wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)

wangEditor 是一款基于原生 JavaScript 封装，开源免费的富文本编辑器，支持常规的文字排版操作、插入图片、插入视频、插入代码等功能，同时提供多样化的扩展功能（如字体、颜色、表情、代码、地图等插件），支持插件化开发和自定义配置。该编辑器简洁易用，功能齐全，可广泛应用于各种 Web 项目中。

以下实战记录，基于wangEditor V5版，说明文档：传送门

一、编辑器基本配置

在这里插入图片描述
wangEditor 从 V5 版本开始，工具栏配置和菜单配置（如配置颜色、字体、链接校验、上传图片等）分离了。

1.编辑器自适应CSS

         #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }
 
        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }
 
        #editor-container {
            height: 500px;
        }复制

2.构建编辑器容器

 <div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>复制

3.配置项设置

     //配置项
    const {createEditor, createToolbar} = window.wangEditor
    const editorConfig = {
        MENU_CONF: {},
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            //console.log(html)
        }
    }
    
 const editor = createEditor({
        selector: '#editor-container',
        html: '',//预置内容
        config: editorConfig,
        mode: 'default', // or 'simple'
    })
 
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        uploadVideoShow: false,
        mode: 'default', // or 'simple'
    })复制

4.获取内容

    $("#btn").click(function () {
        const html1 = editor.getHtml()
        console.log(html1);
    });复制

【注意】 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写。HTML 格式非常灵活，wangEditor 无法兼容所有的 HTML 格式。例如，wangEditor 可以识别 hello 为加粗，但无法识别 hello 等其他加粗方式。

二、上传图片配置

1.前端配置

     //上传图片
    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'up.php',
        maxFileSize: 1 * 1024 * 1024, // 1M
        allowedFileTypes: ['image/*'],
        // 单个文件上传失败
        onFailed(file, res) {
            console.log('上传失败', res)
        },
    }复制

2.后台API接口配置

up.php文件（未做上传逻辑展示）

正常返回

 $res = ["errno" => 0,
    "data" => [
        "url" => "20230613110558393.jpg"
    ]
];
die(json_encode($res));复制

异常返回

 $res = [
    "errno" => 1,
    "message" => "失败信息"
];
 
die(json_encode($res));复制

三、隐藏上传视频

在这里插入图片描述

1.获取工具栏按钮

     console.log(toolbar.getConfig().toolbarKeys);复制

2.排除菜单

如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置；
如果你想排除某个菜单组，可通过toolbar.getConfig().toolbarKeys 找到这个菜单组的 key；