vue富文本编辑器中上传图片

啊！！！好久没更新了，最近粉丝和访问量见长，正好有童鞋的项目遇到点问题，故出此文，

今天超哥给小伙伴带来的是vue中富文本编辑器上传的问题。

曾经写过一个文档管理的项目，用到最多的就是富文本编辑器。

说说遇到的坑吧：最终的提交结果，后端不要文档流，后端要上传成功返回的路径，不知道正在阅读此文的小伙伴是如何处理的，瞅着挺简单，但写起来还真有点麻烦，在这里以vue-quill-editor为例给大家演示。

首先安装，不用多说了吧，cnpm install vue-quill-editor -S

接着，引入依赖

import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor)

先说一下实现过程吧，依赖element-ui，当然你可以想成你自己想要的上传插件，或者有大神可以直接new FormData()也是可以的。用白话文讲就是把插件中的图片按钮用el-upload覆盖，就这么简单。具体实现过程请继续往下看。

在所需的vue文件中

首先看DOM层，只需两个标签即可（quill-editor，el-upload）

附代码：

    <el-uploadclass="avatar-uploader":action="serverUrl"name="img":data='fileUpload':show-file-list="false":on-success="uploadSuccess":on-error="uploadError":before-upload="beforeUpload"></el-upload><quill-editor v-model="docContent"ref="myQuillEditor":options="editorOption"@blur="handleEditorBlur($event)"@focus="handleEditorFocus($event)"@change="handleEditorChange($event)"></quill-editor>

写过vue的相信el-upload大家都不陌生，在这里就不一一介绍各个属性了，而quill-editor这里超哥直接附上传送门vue-quill-editor - npm

数据层，附代码：

fileUpload:{   //附件上传file:null},
serverUrl: 'http://********',//上传图片的地址
editorOption: {placeholder: '',theme: 'snow',modules: {toolbar: {container: toolbarOptions,  // 工具栏handlers: {'image': function (value) {if (value) {document.querySelector('.avatar-uploader input').click()} else {this.quill.format('image', false);}}}}}},

看到这里有的小伙伴可能看到了重点，toolbarOptions是哪里来的，不要急，这个东西就是所需配置的工具栏，当时我们项目有回显功能所以超哥单独给他摘出来了。

toolbarOptions.js附代码：

const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],        ['blockquote', 'code-block'],[{'header': 1}, {'header': 2}],               [{'list': 'ordered'}, {'list': 'bullet'}],[{'script': 'sub'}, {'script': 'super'}],      [{'indent': '-1'}, {'indent': '+1'}],         [{'direction': 'rtl'}],                         [{'size': ['small', false, 'large', 'huge']}], [{'header': [1, 2, 3, 4, 5, 6, false]}],[{'color': []}, {'background': []}],          [{'font': []}],[{'align': []}],['link', 'image', 'video'],['clean']
]
export default toolbarOptions

然后继续，逻辑层，附代码：

注：uploadSuccess为改写的重中之重。

    uploadError() {// loading动画消失this.quillUpdateImg = falsethis.$message.error('图片插入失败')},uploadSuccess(res, file){// 首先获取富文本编辑器的实例let quill = this.$refs.myQuillEditor.quill// 上传成功所执行if (res.code == 200 && res.data !== null) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片res为服务器返回的数据quill.insertEmbed(length, 'image', res.data)// 光标移动至文本末端quill.setSelection(length + 1)} else {this.$message.error('图片插入失败')}// loading动画消失this.quillUpdateImg = false},beforeUpload(file) {this.fileUpload.file=file;// 显示loading动画this.quillUpdateImg = true},handleEditorBlur () {},handleEditorFocus () {},//这个是当初做的个文字限制后来没用就注释了handleEditorChange (e) {/*this.textLen = e.text.length - 1;this.beyond = this.textLen - 350;if (this.textLen > 350) {this.info.evId = '';} else {this.info.evId = this.evList[0].evId;}*/},

到这里此工程其实就已经竣工，说简单也简单说复杂也复杂，全在自己的摸索和探讨。

有时候比较忙，顾不上一一回复，但是看到了就一定会回复，

各位小伙伴和童鞋有不明白的或者不会的依然可以留言...

依旧老样子，不喜勿喷，写给需要的人看，渣*请自觉绕道

vue富文本编辑器中上传图片相关推荐

vue富文本编辑器中样式冲突和不能修改的问题
在vue项目中,富文本回显通常采用的是v-html指令来渲染html字符串.但是在回显的过程中,发现了一些问题,以此记录下来. 1.富文本(tinyMec)在编辑的时候采用的是iframe隔离,这样的 ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
富文本编辑器中空格转化为a_如何对富文本编辑器（FCK Html Editor）的工具栏进行扩展？...
我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...
JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
js显示PHP源代码命令,layedit富文本编辑器中如何添加显示源码功能（代码）
本篇文章给大家带来的内容是关于layedit 富文本编辑器中如何添加显示源码功能(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 由于项目需要用到富文本编辑器,并且要有显示源码 ...
flex html 控制编辑,在富文本编辑器中添加Tab键功能（Flex 3）
我试图在使用事件keyDown的富文本编辑器中添加Tab键功能.只需要清楚,在标签键上,我需要将控件保留在前面带有'\ t'空格的同一个文本框中,而不是跳到下一个对象.我尝试的下面的代码完全适用于te ...
vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
vue-quill-editor 富文本编辑器自定义上传图片
① 安装插件,以及引入插件使用命令:npm install vue-quill-editor -S ② main.js 中引入 // 导入富文本编辑器 import VueQuillEditor f ...

vue富文本编辑器中上传图片

vue富文本编辑器中上传图片相关推荐

最新文章

热门文章