vue2中使用ueditor百度富文本，并支持插入公式

连续折腾了几个晚上，终于成功在vue2上使用 ueditor百度富文本，并支持图片公式等。 希望可以帮助到此刻正在困扰的同学

一、下载包

从Ueditor的官网下载jsp版本的Ueditor编辑器，目前官网已经下架，下载不了。实在找不到私聊我

解压后会得到一下地址，包含公式插件

二、使用教程

1. 将解压后的静态文件，放到 static文件夹中

2.创建一个 .vue文件，并引入对用的文件 ，用于封装 ueditor富文本

3. 使用封装的组件

这时候应该就开始报错了，有一些报错忘了截图了（主要是静态资源路径的问题和图片上传问题）


解决办法：

1. 修改vue.config.js，因为我们之前静态资源都会打包到 static文件夹中
   
   需要增如下配置，将ueditor所在的静态资源复制到打包后的 static文件夹中
   
2. 修改 ueditor.config.js 文件
   3.修改z-index 富文本弹出窗层级问题，否则，弹出层会再显示在底部，看不到
   
   这时候 富文本就可以使用了，但是图片和公式 功能还不能使用

一、解决图片上传问题，因为百度富文本出来很多年了，之前都是配合jsp语法使用，所以我通过查阅资料，修改了源码后图片功能才能正常使用
在 ueditor.all.js 文件中
我们可以在代码编辑器中搜索 simpleupload

然后把插件为 input 绑定的事件注释掉
在该代码的后面添加以下代码:

 input.onchange = function() {
        if (!input.value) return;
        var loadingId = "loading_" + (+new Date()).toString(36);
        var params =
          utils.serializeParam(me.queryCommandValue("serverparam")) || "";

        var imageActionUrl = me.getActionUrl(me.getOpt("imageActionName"));
        var allowFiles = me.getOpt("imageAllowFiles");
        var uploadUrl =  me.getOpt("uploadUrl");  // 上传地址

        me.focus();
        me.execCommand(
          "inserthtml",
          '+
          loadingId +
          '" src="' +
          me.options.themePath +
          me.options.theme +
          '/images/spacer.gif">'
        );

        function showErrorLoader(title) {
          if (loadingId) {
            var loader = me.document.getElementById(loadingId);
            loader && domUtils.remove(loader);
            me.fireEvent('showmessage', {
              'id': loadingId,
              'content': title,
              'type': 'error',
              'timeout': 4000
            });
          }
        }

        var filename = input.value,
          fileext = filename ? filename.substr(filename.lastIndexOf(".")) : "";
        if (
          !fileext ||
          (allowFiles &&
            (allowFiles.join("") + ".").indexOf(fileext.toLowerCase() + ".") ==
            -1)
        ) {
          showErrorLoader(me.getLang("simpleupload.exceedTypeError"));
          return;
        }

        var formData = new FormData()
        formData.append('file', input.files[0]);
        formData.append('resourceId', 4)    // 这是我们接口需要的参数
        /* 替换你的URL */
        $.ajax(uploadUrl ,{   // 需要在index.html 中引入jquery,否则报错 $ underfine
          data: formData,
          processData:false,
          contentType: false,
          type:"post",
          success:function(data){
            try {
              var link,
                loader;
              link = data.file_path ;    // file_path 是接口返回的图片路径
              if (data.success && data.file_path) {  
                // 将加载中图标替换成上传的图片
                loader = me.document.getElementById(loadingId);
                domUtils.removeClasses(loader, "loadingclass");
                loader.setAttribute("src", link);
                loader.setAttribute("_src", link);
                loader.removeAttribute("id");
                me.fireEvent("contentchange");
              } else {
                showErrorLoader && showErrorLoader(json.state);
              }
            } catch (er) {
              console.log(er)
              showErrorLoader &&
              showErrorLoader(me.getLang("simpleupload.loadError"));
            }
          }
        })
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

二、解决插入公式问题，我点击公式时，弹出的弹窗不对。修改addKityFormulaDialog.js 文件中的两个路径