UEditor项目中引用及解决无法上传的问题

 上传图片可能会出现报错，如下

解决这个问题可以将php文件下config.json的内容复制到ueditor.config.js中（具体文件在分割线下方的整体流程中）

 解决后应该得到的页面如下

---

试题题库、考试等项目多会用到富文本编辑器，当时对比了好多，最后看上了UEditor集成复杂公式的功能，于是莫名自信的搞了起来。公式集成没有坑，大坑在上传图片上。

UEditor资源下载链接

下面就是 基本的引入、使用、以及上传文件报错的解决方法

一、引入

1、安装组件

npm install vue-ueditor-wrap

 2、下载UEditor，官网UEditor文档，下载地址是GitHub - fex-team/ueditor: rich text 富文本编辑器

这里有疑问： 为什么已经用npm安装了，还需要下载UEditor呢？？？

答：UEditor 并不支持通过 npm 的方式来安装，vue-ueditor-wrap 也只是一个 Vue 组件，看最初官网提供的版本就知道了

 需要下载的内容：现在下载地址中的ueditoe.config.js的配置不完整，可能会导致上传图片、视频等出现【后台配置不正确】的问题。所以自己原来下载的安装包挂在了这个地址ueditor-download: vue项目中集成ueditor的UE资源

 3、下载完成后将整个文件夹放到项目的public文件夹下，目录结构如下：

4、配置编辑器路径

 5、静态文件还需要再public/index.html中进行引入

    <!-- 引入UEditor -->
    <script type="text/javascript" charset="utf-8" src="UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="UEditor/ueditor.all.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="UEditor/lang/zh-cn/zh-cn.js"></script>

6、将ueditor挂载到全局下，在main.js中引入

import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('VueUeditorWrap', VueUeditorWrap)

二、使用

1、使用、配置自定义工具栏

进行到这里，我们页面就基本可以使用富文本编辑器了，其中我们可以自定义config展示我们需要的工具，具体配置可以参考ueditor.config.js文件中的内容

<vue-ueditor-wrap
    v-model="dataForm.analysis"
    :destroy="false"
    :config="config"
/>

2、 集成第三方公式插件，插件kityformula-plugin

在index.html中引入公式文件，在config.js中的toolbars数组下添加‘kityformula’

 至此，集成公式就可以了。大坑在下面上传文件

---

 3、上传文件

现在上传图片可能会出现报错，如下

解决这个问题可以将php文件下config.json的内容复制到ueditor.config.js中

 解决后应该得到的页面如下

4、后端交互

接着来就是和后端的交互了。在php/config.json的文件中有每个属性的注释，可以对照修改。后端也需要引入UEditor的包，具体包需要后端根据项目技术下载。

 至此完。综合全网问题大多会卡在文件上传部分

---