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的包,具体包需要后端根据项目技术下载。

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


  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值