wangEditor 5上传图片自定义 html 样式

原创已于 2023-06-27 03:25:30 修改

· 2.9k 阅读

8 ·

版权

文章标签：

#html #前端 #wangEditor #上传图片 #自定义样式 #css #js

于 2023-06-26 20:49:15 首次发布

Web 专栏收录该内容

87 篇文章

订阅专栏

文章介绍了如何在wangEditor中使用JS处理图片上传后的内容渲染，包括覆写elem-to-html.ts文件，注册自定义的imageToHtmlConf配置，以及在编辑器初始化前后需要注意的事项，如textarea的值设置。这样可以确保上传的图片带有自定义样式，并正确同步到后台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于官方文档是针对 TS 进行说明的，且并未详细提及到上传图片后对渲染的处理，这里仅针对 JS 的处理方法进行描述

原理

通过覆写该文件后进行注册即可：https://github.com/wangeditor-team/wangEditor/blob/master/packages/basic-modules/src/modules/image/elem-to-html.ts

创建部分

HTML 部分

<div id="wang-editor—wrapper">
    <div id="toolbar-container"></div>
    <div id="editor-container" style="height: 100%; min-height: 500px;"></div>
</div>

<!-- 注意此处我使用的是 textarea -->
<textarea class="hidden" id="content" name="content"></textarea>

JS 部分

const {createEditor, createToolbar} = window.wangEditor;

const editorConfig = {
    placeholder: '点击此处输入文字或通过工具栏插入相关内容...',
    MENU_CONF: {
        // 根据需要自行配置，或通过后端代码渲染、接口设置均可
    },
    onChange(editor) {
        // 同步到 textarea
        $this.parents('.form-field').find('#content').val(editor.getHtml());
    }
};

const editor = createEditor({
    selector: '#editor-container',
    config: editorConfig,
    mode: 'default',
    html: $('#content').val()
});

const toolbarConfig = {};

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default',
});

以上是根据文档创建编辑器的过程，接下来是如何对上传后的图片添加自定义样式的说明

修改部分

将 JS 中第一行修改为 const {Boot, createEditor, createToolbar} = window.wangEditor;，多出一个 Boot

接着在该行下方定义对象 imageToHtmlConf，代码如下：

const imageToHtmlConf = {
    type: 'image',
    elemToHtml: function imageToHtml(elemNode) {
        const {src, alt = '', href = '', style = {}} = elemNode || {}
        const {width = '', height = ''} = style

        let styleStr = 'max-width: 100%;'; // 自定义样式设置到此处

        if (width) styleStr += `width: ${width};`;
        if (height) styleStr += `height: ${height};`;

        return `<img src="${src}" alt="${alt}" data-href="${href}" style="${styleStr}"/>`
    }
};

最后将该 config 进行注册：

Boot.registerElemToHtml(imageToHtmlConf);

此时上传图片后，直接提交到后端将会看到请求的参数类似下方：

content: <p><img src="https://res.example.com/202306/974a2c7993cc086bcc2d187ec0711e1764998411b4ab5.jpg" alt="" data-href="" style="max-width: 100%;"/></p>

特别说明

注意，registerElemToHtml 方法必需在 createEditor 之前，且同一个注册方法仅能注册一次。

多说两句，这里还有个关于 textarea 的小坑。在你从数据库取 html 内容并渲染至编辑器时
你 必需先 在 textarea 标签中渲染该标签的 value（或是通过接口返回的内容先给 textarea.value 设置上）
然后在 createEditor 阶段通过取 textarea 的 value 渲染到编辑器，否则可能出现一些神奇的问题。
意思是，不能将接口返回的已保存至数据库的 html 值在 createEditor 方法中直接设置到 html 属性使用
（非前后端分离项目同理，不能将值直接渲染到 html 属性中）