vue+WangEditor+自定义上传图片

 

<div class="content">
            <p name="editor" id="editor" ref="editor" style="z-index: -1"></p>
            <el-input id="in" type="hidden"></el-input><!--绑定输入-->
          </div>

 

初始化VUE

setup() {
    let data = reactive({});
    onMounted(() => {
      let editor = new EWangEditor("#editor");
      editor.config.uploadImgShowBase64 = true;
      editor.config.onchangeTimeout = 400;

      editor.config.customAlert = (err) => {
        console.log(err);
      };

      editor.customConfig = editor.customConfig
          ? editor.customConfig
          : editor.config;

      editor.customConfig.onchange = (html) => {
        data.editorContent = html;
　　　　　　 //将编辑器里的值赋值给输入绑定的一个Input输入框了，后面可以直接获取输入框里的值即可
        document.getElementById('in').value = html;
        console.log(html);
      };
      //以下为新增
      const menuItem = [  //工具栏里有哪些工具
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  //字号
        'fontName',  //字体
        'italic',  // 斜体
        'underline',  //下划线
        'strikeThrough',  //删除线
        'indent',  //缩进
        'lineHeight',  //行高
        'foreColor',  //文字颜色
        'backColor',  //文字背景颜色
        'link',  //链接，插入一个链接地址，如果填写了描述，则高亮显示描述。若没有，则高亮显示链接
        'list',  // 序列（有序列表、无序列表）
        'todo',  //待办事项
        'justify',  // 对齐方式
        'quote',  //引用
        'emoticon',  //表情
        'image',  //插入图片
        'video',  //插入视频
        'table',  //表格
        'code',  //代码
        'splitLine',  //分割线
        'undo',  //撤销
        'redo' //恢复
      ];

      editor.config.menus = [...menuItem]; /* 应用设置好的工具栏 */

      editor.config.colors = ["#000000", "#eeece0", "#1c487f", "#4d80bf"];  /* 文字颜色、背景色可以选择哪些颜色? */

      editor.config.fontNames = [ /* 字体工具提供哪些字体? */
        "黑体",
        "仿宋",
        "楷体",
        "标楷体",
        "华文仿宋",
        "华文楷体",
        "宋体",
        "微软雅黑",
      ];
      editor.config.height = 700;  //你可能发现这个编辑器是没法用样式调高度的?


      editor.customConfig.customUploadImg = function (files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // 在这里进行一系列的校验
        const formData = new FormData();
        formData.append("file",files[0]);
        //后端接收文件的API接口
        axios.post('http://localhost:8080/itkb/square/article/uploadArticleImage',formData,{
          'Content-type' : 'multipart/form-data'
        }).then(res=>{
          // 上传成功后的处理
          // 上传代码返回结果之后，将图片插入到编辑器中
          insert(res.data)
        },err=>{
          // 出现错误时的处理
          console.log('上传图片失败'+err.data)
        })

      }
      //新增至此
      editor.create();
    });

  },

    /**
     *  新增文章里的上传图片功能
     * @param file
     * @return 
    @PostMapping(value = "uploadArticleImage")
    public String uploadArticleImage(MultipartFile file) throws IOException {
        // 图片存储路径
        //String path = "C:\\Project\\test01\\src\\main\\resources\\static\\ArticleImage\\";
        //需要编译后才能，所以直接存储在target里面
        String path= ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static\\ArticleImage\\";
        // 判断是否有路径
        if (!new File(path).exists()) {
            new File(path).mkdirs();
        }
        String fileName = System.currentTimeMillis() + ".jpg";
        file.transferTo(new File(path+fileName));
        return "http://localhost:8080/ArticleImage/"+fileName;
    }

前端编辑插入图片

 

已经将本地图片插入到服务器端

 

 

查看