antDesignofVue框架富文本JEditor组件上传图片以url的方式存储

1.在页面引用JEditor组件

import JEditor from '@/components/jeecg/JEditor'

components: { 
      JEditor,
    },

2.编写页面代码

以上代码文档中都有不做过多解释
3.在JEditor组件页面设置上传图片到后端以url的方式进行存储并返回
这一步与之前写过的一篇vue页面quillEditor组件富文本上传图片有点不一样，传送门https://blog.csdn.net/qq_39252591/article/details/103665020主要不一致的是quillEditor组件借助el-upload组件来实现上传图片而JEditor组件是直接在原生组件设置上传图片。优缺点就不说了大家可以自行对比代码如下
重点
引入axios当然也可以选择Vue方式都可以只需要把数据提交到后端即可

import { axios } from '@/utils/request'

JEditor组件页面有很多东西我们需要配置的地方就在于初始化配置init方法里

init: {
          language_url: '/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/tinymce/skins/lightgray',
          height: 300,
          plugins: this.plugins,
          toolbar: this.toolbar,
          branding: false,
          menubar: false,
          toolbar_drawer: false,
          images_upload_handler: (blobInfo, success) => {
            let file = blobInfo.blob();
            let data = new FormData();
            data.append("file", file);
            axios({
              method: 'post',
              url: '/admin/uploadLayEditImage',
              data: data
            }).then(function (res){
              if (res !== null){
                if (res.result.code== 0){
                  let imgUrl = res.result.fileUrl;
                  success(imgUrl);
                }else {
                  console.log(res.result.msg);
                }
              }else {
                console.log("返回值为空");
              }
            });
          }
        },

重点就在最后一个images_upload_handler属性中之前默认是从blobInfo中取出文件的base64编码存储以上代码把文件传到后端然后接收后端返回的url到这里就大功告成了。