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

news2025/2/13 10:42:24

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；

在这里插入图片描述

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

    //排除菜单
    toolbarConfig.excludeKeys = [
        'uploadVideo' // 排除菜单组，写菜单组 key 的值即可
    ]

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        uploadVideoShow: false,
        mode: 'default', // or 'simple'
    })