如何在vue项目中使用百度编辑器ueditor
百度编辑器官方并没有提供vue项目使用说明,目前网上也有不少人实现了相关功能,这里就不再重复,只是针对自身项目碰到的情况做个记录,就当是熟悉了一遍富文本编辑器的代码结构。
按照网上的做法,基本可以实现编辑器的基本使用,但存在两个问题
a、编辑器内容回显,调用官方的setContent方法无法将后端返回的数据现在在编辑起立
b、无法实现图片上传,官方提供了asp/jsp/php的配置方法,未提供vue项目的配置办法,这就要自己去处理了
第一个问题:
因为使用编辑器自带的setContent()方法无法将后端返回的数据显示出来,就尝试输出编辑器对象,看看这个对象上是否有对应的属性或方法能用
从输出的所有属性上看并没有setContent()方法,好在找到了一个
this.$refs.ue.editor.body.innerHTML
属性
将后端获取到的数据复制给该属性就实现了数据的回显
第二个问题
在配置文档中有一个serverUrl属性,在ueditor.config.js文件中,该属性是编辑器图片上传接口属性,插件初始化时会检测该接口是否可用来判断是否初始化图片上传功能,网上很多教程都没有解决这个问题,这也是本文的价值所在。
按照官方文档给serverUrl赋值自己的上传接口,遗憾的是已经无效,仔细翻看源码后发现了下面一行:
serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?':'&') + 'action=' + (actionName || '');
再到浏览器审查元素里对比发现插件给我们配置的接口做了拼接处理,如:
http://aa.cc.cc/upload
变成了
http://aa.cc.cc/upload?encode=utf-8&action=uploadimg
由于后端严格限制了路由,这种网址就无法访问了,所以只能处理掉这段插件代码。这里要注意的是插件中多个地方涉及到了对上传接口地址的拼接,可以全局搜索一下,需要哪里改哪里。
本项目在上传时统一需要携带一个token,插件本身是没有这个功能的,翻看源码发现,在ueditor.all.js中有这样一段代码
configUrl && UE.ajax.request(configUrl,{
// ....
})
这段代码就是发送请求,检测接口是否可用的关键,之前因为缺少token一直提示接口未正确配置,这里改一下,加个token参数即可,代码大概在8074行
'data': {
token: localStorage.getItem("token")
},
修改后接口就通了
百度ueditor有两个上传图片的地方,如图:
左侧适合传单图,右侧适合传多图。
单图其实就是表单提交,多图则是异步提交,因本项目token必须挡在请求头中要实现该功能必须修改提交方式,这就麻烦了点,所以本次暂不处理单图上传的情况。
多图上传则设计到一个dialog弹窗,代码在“UE/dialogs/image/images.js”中,改函数封装了很多构造函数,分别针对四个tab
如何在vue项目中使用百度编辑器ueditor的更多相关文章
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
- 如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
- vue项目中使用百度统计
统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...
- 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...
随机推荐
- Kinect 开发 —— 杂一
Kinect 提供了非托管(C++)和托管(.NET)两种开发方式的SDK,如果您用C++开发的话,需要安装Speech Runtime(V11),Kinect for Windows Runtime ...
- JavaWeb学习笔记:Tomcat
Tomcat 开源的 Servlet 容器. 部署并启动 tomcat server. 解压 apache-tomcat-6.0.16.zip 到一个非中文文件夹下. 配置一个环境变量. java_h ...
- Tuple<int, int> Dictionary<string, object>妙用
Tuple<int, int> Dictionary<string, object>妙用
- js 关于网易淘宝移动端适配的学习
(function (doc, win) { // orientationchange:用户水平或者垂直翻转设备(即方向发生变化)时触发的事件;(屏幕大小发生变化) var docEl = doc.d ...
- Javascript 6 种继承
1.原型链继承 // 1.原型链继承的两个问题===>在借用构造函数中可以解决下下面的两个问题//problem: 在创建子类型的实例时,不能向超类型的实例传递参数(在这里就是不能向A()里传递 ...
- echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)
项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化. 先附代码: formatter: function(params) { var result = '' params. ...
- BZOJ2434: [Noi2011]阿狸的打字机(fail树+dfs序)
Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...
- VB 宏+mysql解决EXCEL表格实现自动化处理
1.表格模板自动建立源码 Sub opp()Dim myPath$, myFile$, AK As WorkbookApplication.ScreenUpdating = FalsemyPath = ...
- Docker+Solr
原文:Docker+Solr docker 内的solr并不是部署在tomcat里,而是自启动的.默认的home是/opt/solr/server/solr # docker search solr ...
- 使用C#对XML进行增删改查操作
xml文件格式 <?xml version="1.0" encoding="utf-8"?> <messageList> <mes ...