【富文本编辑器】原生JS使用WangEditor和vue上传图片前后端demo

【富文本编辑器】原生JS使用WangEditor上传图片前后端demo

[第一步 HTML](#第一步 HTML)
[第二步初始化WangEditor与图片上传回调函数](#第二步初始化WangEditor与图片上传回调函数)
[第三步后端返回数据体封装](#第三步后端返回数据体封装)
[第四步后端接口上传图片，并返回图片地址](#第四步后端接口上传图片，并返回图片地址)

最近，我遇到了这样一个问题：因为我们的项目是基于比较陈旧的技术搭建的，暂时也没有足够的时间去进行大规模的迭代更新，比如将其改造成前后端分离的架构。但是项目要引入富文本编辑器，所以就比较难受了。

我们项目中的Vue 2是通过JS文件引入的，所以我们找一个既能兼容我们现有架构，又具有详尽文档、支持JS文件引入的富文本编辑器。在经过一番筛选后，我最终选择了WangEditor。感兴趣可以查看它的官方文档：https://www.wangeditor.com/v5/。

今天实现了WangEditor的图片上传功能。这里贴出来demo方便大家直接用。

第一步 HTML

老项目一般都用Bootstrap的布局特性来构建用户界面。首先，我在代码的上半部分定义了富文本编辑器的样式和功能。

接着，在代码的下半部分，我设置了Vue的提交按钮。

python 复制代码

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

第二步初始化WangEditor与图片上传回调函数

使用 window.wangEditor 对象中的 createEditor 和 createToolbar 方法来创建编辑器和工具栏。

最重要的是图片上传配置：editor.getConfig().MENU_CONF['uploadImage'] 用于设置图片上传的相关配置。包括服务器端点、字段名称和成功上传时的回调函数。

javascript 复制代码

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

第三步后端返回数据体封装

官网对回调函数接受的结果有格式要求，下面封装一下消息体：

java 复制代码

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;
    }
}

第四步后端接口上传图片，并返回图片地址

最后在接口里面上传图片，再把图片地址返回回去。