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

由于官方文档是针对 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 属性中）