[Rich Text Editor] Native JS uses WangEditor and vue to upload images before and after demo

  Recently, I encountered such a problem: Because our project is based on relatively old technology, there is currently not enough time to carry out large-scale iterative updates, such as transforming it into a front-end and back-end separation architecture. But the project needs to introduce a rich text editor, so it is more uncomfortable.

  Vue 2 in our project is introduced through JS files, so we are looking for a rich text editor that is compatible with our existing architecture, has detailed documentation, and supports the introduction of JS files. After some screening, I finally choseWangEditor. If you are interested, you can view its official documentation: https://www.wangeditor.com/v5/.

  Today the image upload function of WangEditor has been implemented. The demo is posted here for everyone to use directly.

First step HTML

  Old projects generally use the layout features of Bootstrap to build user interfaces. First, I defined the style and functionality of the rich text editor in the upper part of the code.

  Next, in the lower part of the code, I set up Vue’s submit button.

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

<div class="card-body" id="app">
   <button class="btn btn-success center" @click="handleAdd">保存并提交</button>
</div>

Step 2: Initialize WangEditor and image upload callback function

  Use the and methods on the window.wangEditor object to create the editor and toolbar. createEditorcreateToolbar

  The most important thing is the image upload configuration:editor.getConfig().MENU_CONF['uploadImage'] is used to set the related configuration of image upload. Includes server endpoint, field names, and callback function on successful upload.

<script type="module">
    const {
    
     createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
    
    
        placeholder: 'Type here...',
        onChange(editor) {
    
    
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    }

    const editor = createEditor({
    
    
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {
    
    
        excludeKeys: ["fullScreen"]
    }

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

    editor.getConfig().MENU_CONF['uploadImage'] = {
    
    
        server: '/file/upload-image',
        fieldName: 'file',
        onSuccess(file, res) {
    
              // JS 语法
            console.log(file, res)
            console.log(`${
      
      file.name} 上传成功`, res)
        },
    }


    new Vue({
    
    
        el: '#app',
        name: "Editor",
        data: {
    
    

        },
        mounted: function () {
    
       //自动触发写入的函数

        },
        created: function () {
    
    

        },
        methods: {
    
    
            handleAdd: function () {
    
    
                console.log(editor.getHtml())
            }
        }
    })

</script>

Step 3: The backend returns the data body encapsulation

  The official website has format requirements for the results accepted by the callback function. The message body is encapsulated below:

public class FileUploadResult {
    
    
    private int errno;
    private String message;
    private ImgUploadResult data;

    public FileUploadResult() {
    
    
        this.errno = 1;
        this.message = "上传失败";
    }

    public FileUploadResult(String url) {
    
    
        this.errno = 0;
        this.message = "上传成功";
        this.data = new ImgUploadResult(url);
    }

    public static FileUploadResult success(String url) {
    
    
        return new FileUploadResult(url);
    }

    public static FileUploadResult fail() {
    
    
        return new FileUploadResult();
    }

    public int getErrno() {
    
    
        return errno;
    }

    public void setErrno(int errno) {
    
    
        this.errno = errno;
    }

    public String getMessage() {
    
    
        return message;
    }

    public void setMessage(String message) {
    
    
        this.message = message;
    }

    public ImgUploadResult getData() {
    
    
        return data;
    }

    public void setData(ImgUploadResult data) {
    
    
        this.data = data;
    }
}

public class ImgUploadResult {
    
    
    private String url;
    private String alt;
    private String href;

    public ImgUploadResult(String url) {
    
    
        this.alt = "";
        this.href = "";
        this.url = url;
    }

    public String getUrl() {
    
    
        return url;
    }

    public void setUrl(String url) {
    
    
        this.url = url;
    }

    public String getAlt() {
    
    
        return alt;
    }

    public void setAlt(String alt) {
    
    
        this.alt = alt;
    }

    public String getHref() {
    
    
        return href;
    }

    public void setHref(String href) {
    
    
        this.href = href;
    }
}

Step 4: Upload the image through the backend interface and return the image address

  Finally, upload the image in the interface and return the image address.

@PostMapping("/upload-image")
    public FileUploadResult uploadImage(@RequestParam(value = "file", required = true) MultipartFile file) throws IOException {
    
    
        String url = FileUploadUtils.upload(
	        ProjectConfig.getUploadPath(), 
	        file,
        	MimeTypeUtils.IMAGE_EXTENSION
        );

        return FileUploadResult.success(url);
    }