vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方。
第一步下载 vue-quill-editor:
npm i vue-quill-editor -S
第二步,将vue-quill-editor引入到main.js:
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);
第三步,就可以在组件里面使用了。
//html <div>
<quill-editor v-model="ruleForm.content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
//js <script>
import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill' //引入编辑器
export default {
components: {quillEditor},
data () {
return {
content: null,
editorOption: {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、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: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
], //工具菜单栏配置
},
placeholder: '请在这里添加产品描述', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
methods: {
// 失去焦点
onEditorBlur(editor) {},
// 获得焦点
onEditorFocus(editor) {},
// 开始
onEditorReady(editor) {},
// 值发生变化
onEditorChange(editor) {
this.content = editor.html;
console.log(editor);
},
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
这样就可以使用富文本了。。如下图:
但是这样要是上传个图片,图片是不能放大,缩小和拖拽的,所以要想让图片放大,缩小可以拖拽,请继续往下看。。。。
实现图片拖拽,放大和缩小,需要下载 vue-quill-editor image依赖的功能插件。
npm i quill-image-drop-module -S npm i quill-image-resize-module -S
然后在组件里引入使用:
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop);
Quill.register('modules/imageResize', ImageResize);
editorOption: {
modules:{
imageDrop: true, //图片拖拽
imageResize:{ //放大缩小
displaySize: true
},
toolbar: {
container: toolbarOptions, // 工具栏 }
}, },
theme:'snow'
},
这样图片就可以放大缩小,和拖拽了。
富文本编辑器的图片上传,显示的地址是base64格式,如何图片上传过多的话就会特别减缓富文本的提交速度,特别慢而且会报错。
所以会选择将图片上传到服务器上,然后返回后台给的img链接,最后显示在富文本对应的位置。
富文本上传我用过两种方法:
方法一:给后台传的图片格式是formData格式,就是文件格式
将图片上传到服务器需要vue-quill-editor 的 image扩展插件,首先下载这个插件:
npm i quill-image-extend-module -S
然后将插件引入富文本组件中使用。
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend); editorOption:{
modules:{
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function () { //触发图片上传的时候返回的信息
QuillWatch.emit(this.quill.id) //使用图片上传插件的统一写法
}
}
},
imageResize: { //图片放大缩小
displaySize: true
},
ImageExtend: { //使用的图片上传扩展插件
name: 'img', //传的参数名
size: 2, // 单位为M, 1M = 1024KB
action: url, //后台上传图片的接口地址
headers: (xhr) => { //请求头
},
response: (res) => {
console.log(res);
return res.data[0]; //返回的图片信息
}
},
},
},
方法二:由于后台强调图片上传的时候,需要给他传的 img参数 必须是base64格式的;所以我就只能放弃第一种方法,使用下面的这个方法。
这个方法需要结合element ui的图片上传插件一起使用。
//html
<div class="edit_container" style="margin-bottom: 20px">
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
:action="serverUrl"
name="img"
:before-upload="beforeUpload">
</el-upload>
<!--富文本编辑器组件-->
<el-row v-loading="uillUpdateImg">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
</quill-editor>
</el-row>
</div>
editorOption: {
modules:{
imageDrop: true,
imageResize:{
displaySize: true
},
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}, },
theme:'snow'
},
// 上传图片前
beforeUpload(file) { //element 上传图片的方法
console.log(file);
var _this = this;
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var obj = {
imgData:e.target.result, //给后台传的参数 base64格式的img参数
};
findList.uploadImage(qs.stringify(obj)).then(data => {
console.log(data,'上传的图片')
console.log(data.ResultObj);
if(data.ResultCode==1){
// 获取光标所在位置
let length = quill.getSelection(true).index;
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', data.ResultObj);
// 调整光标到最后
quill.setSelection(length + 1)
}else{
this.$message({
message: '图片上传失败!',
type: 'error'
});
}
}); };
return file;
},
vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)的更多相关文章
- vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决:
//预览<div class="htmlViewBox"> <p v-html="activity_html_defaultMsg" v-sh ...
- vue+富文本编辑器UEditor
vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- vue 富文本编辑器 项目实战用法
1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...
- 前端富文本编辑器vue + tinymce
之前有项目需要用到富文本编辑器,在网上找了好几个后,最终选择了这个功能强大,扩展性强的tinymce tinymce中文文档地址(不全):http://tinymce.ax-z.cn/ tinymce ...
- vue富文本编辑器vue-quill-editor
1.下载Vue-Quill-Editor npm install vue-quill-editor --save 2.下载quill(Vue-Quill-Editor需要依赖) npm install ...
- vue富文本编辑器
基于webpack和vue 一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill-editor'/ ...
- 小程序editor篇-基本使用图片上传
今天小程序项目内,要弄一个editor,富文本编辑功能,支持图文并茂,前几天刚好看了小程序的demo应用,刚好看到editor这个东东,那就安排! 官网示例git地址 大概看了下文档,拉下官方示例,看 ...
- vue富文本编辑器TinyMec才是最好用的
最近在做一个后台管理系统,系统中需要一个编辑器,没多想,百度查之,找了好些.如下: UEditor CKEditor 4 Vue-html5-editor wangeditor quill .... ...
随机推荐
- 基于 Istio 与 Kubernetes 对应用进行灰度发布与 Tracing
灰度发布,是指在黑与白之间,能够平滑过渡的一种发布方式.通俗来说,即让产品的迭代能够按照不同的灰度策略对新版本进行线上环境的测试,灰度发布可以保证整体系统的稳定,在初始灰度的时候就可以对新版本进行测试 ...
- 03讲基础篇:经常说的CPU上下文切换是什么意思(上)
小结 总结一下,不管是哪种场景导致的上下文切换,你都应该知道: CPU 上下文切换,是保证 Linux 系统正常工作的核心功能之一,一般情况下不需要我们特别关注. 但过多的上下文切换,会把CPU时间消 ...
- 实现当前目录下开启CMD
我们都知道在WIN7下,可以按shift+鼠标右键->在此处打开命令窗口 或者在 输入cmd,回车 那么,怎样去实现这样的功能呢? //当前目录下开启CMD #include <stdio ...
- Spring基础(二)_面向切面(AOP)
面向切面编程 面向切面编程[AOP,Aspect Oriented Programming]:通过预编译方式和运行期间动态代理实现程序功能的统一维护的技术.AOP 是 Spring 框架中的一个重要内 ...
- java10幸运抽奖
public class jh_01_知识点回顾 { public static void main(String[] args) { int a = 10; // 变量.标签. // 重新给a赋值. ...
- 机器学习(ML)十二之编码解码器、束搜索与注意力机制
编码器—解码器(seq2seq) 在自然语言处理的很多应用中,输入和输出都可以是不定长序列.以机器翻译为例,输入可以是一段不定长的英语文本序列,输出可以是一段不定长的法语文本序列,例如 英语输入:“T ...
- Redis(九):主从复制的设计与实现解析
前面几篇我们已经完全理解了redis的基本功能的实现了. 但单靠基本功能实现,往往还是称不上优秀的项目的.毕竟,我们现在面对的都是复杂的环境,高并发的场景,大数据量的可能. 简而言之,现在的系统一般都 ...
- Descriptor - Python 描述符协议
描述符(descriptor) descriptor 是一个实现了 __get__. __set__ 和 __delete__ 特殊方法中的一个或多个的. 与 descriptor 有关的几个名词解释 ...
- jmeter接口测试(登录、注册)
Jmeter 进行接口测试流程: Jmeter 的下载地址:http://jmeter.apache.org/download_jmeter.cgi 下面举例说明使用流程,有两种参数传递的方式,我们以 ...
- Mysql 5.7 主从复制的多线程复制配置方式
数据库复制的主要性能问题就是数据延时 为了优化复制性能,Mysql 5.6 引入了 “多线程复制” 这个新功能 但 5.6 中的每个线程只能处理一个数据库,所以如果只有一个数据库,或者绝大多数写操作都 ...