wangEditor 5 uploads pictures and customizes html style

Since the official documentation is for TS, and does not mention in detail the processing of rendering after uploading images, here is only a description of the processing method for JS

principle

Register by overwriting this file: https://github.com/wangeditor-team/wangEditor/blob/master/packages/basic-modules/src/modules/image/elem-to-html.ts

create section

HTML section

<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 part

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',
});

The above is the process of creating an editor based on the document, and the next step is how to add a custom style to the uploaded image

modified part

Modify the first line in JS to const {Boot, createEditor, createToolbar} = window.wangEditor;have one moreBoot

Then define the object below the line imageToHtmlConf, the code is as follows:

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}"/>`
    }
};

Finally, register the config :

Boot.registerElemToHtml(imageToHtmlConf);

After uploading the picture at this time, submit it directly to the backend and you will see the requested parameters similar to the following:

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

Special Note

Note that registerElemToHtmlthe method must be createEditorbefore , and the same registration method can only be registered once.

To say a few more words, there is still a textareasmall pit about . When you fetch the content from the database htmland render it to the editor,
you must firsttextarea render the tag in the tag ( valueor set the content returned through the interface textarea.valueto the first) and then render it to the editor by fetching the content in the stage ,
otherwise there may be some Fantastic question. This means that the value returned by the interface that has been saved to the database cannot be directly set to the property in the method (the same applies to non-front-end and back-end separation projects, and the value cannot be directly rendered into the property)createEditortextareavalue
htmlcreateEditorhtml
html