vue富文本框(插入文本、图片、视频)的使用及问题小结
今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正。
我这里使用的是Element-ui的上传图片组件
首先引入Element-ui(这个我就不作赘述了,详情参考element中文官网)
在引入富文本组件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);
现在就可以在vue中使用富文本
<template> <!--富文本编辑器--> <el-form-item label="内容" :label-width="formLabelWidth"> <quill-editor v-model="value" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"> </quill-editor> </el-form-item> </template> <script> export default { data() { return { value:'', editorOption: { placeholder: '请输入院校简介', theme: 'snow', modules: {} } }, methods: { onEditorChange() { console.log(this.value) } } } </script>
这里需要注意的是editorOption是必须要配置的
其样式由于没有在modules配置工具拦所以它的出事显示就较为简洁
如果需要上传图片或者视频就需要对模块里面对工具栏进行改造重构(使用handlers)
modules: { toolbar: { handlers: { container: toolbarOptions, // 工具栏 'image': function(value) { if(value) { alert(1) } else { this.quill.format('image', false); } }, 'video': function(value) { if(value) { alert(2) } else { this.quill.format('image', false); } }, } } }
配置好了过后会发现整个富文本编辑器的工具栏没有改变,还是只保留了几个基本的富文本功能。
这个是因为handlers是用来定义自定义程序的,而添加自定义处理程序就会覆盖它本省的工具栏和主体行为所以我们还要再自行配置下自己需要的工具栏,所有功能的配置如下,大家也可以按需配置
const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'font': [] }], [{ 'align': [] }], ['link', 'image', 'video'], ['clean'] // remove formatting button ]
此时的文本工具就会丰富了
这样它的工具栏就会有上传图片和视频的接口,然后你就可以在工具拦的配置里的image和video里配置上传图片或视频,可以根据它的点击来给他相应的处理回应,也可以为其重新定向事件,这里我这里给大家介绍重新定向事件
首先定义一个上传组件,我这里用的是自己写好的上传 组件
<div class='avatar-uploader'> <myUp v-on:getImgUrl='AddInputUrl'></myUp> </div>
设置好相应属性值和事件
<script> import myUp from '@/page/test' //上传组件 export default { data() { return { value:'', editorOption: { placeholder: '请输入院校简介', theme: 'snow', // or 'bubble' modules: { toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'image': function(value){ if(value) { // console.log(this.serverUrl) document.querySelector('.avatar-uploader').click() // alert(1) } else { this.quill.format('image', false); } }, 'video': function(value) { if(value) { alert(2) } else { this.quill.format('image', false); } }, } } } }, } }, methods: { onEditorChange() { console.log(this.value) var conten = this.value this.$emit('getText',conten) } } } </script>
这里需要注意的是如果想直接实现上传的话就需要在工具栏设置点击图片上传的时候用指针函数将this锁定再做其他操作
由于我是自己写的上传所以要插入到富文本内部所以添加内容的时候需要加入img标签,因为富文本内部是支持图片的解析的
AddInputUrl(data) { var a = data var tp = a.length var imghz = a.slice(tp - 4, tp) var src = 'src="' + a + '"' var bq = "<img " + src + " alt='' />" this.value += bq }
做到这里一个支持上传图片的富文本就做好了,再来说下视频,由于引入的富文本绝大多数都是没有内置的播放器所以video标签在富文本里面会失效,在这里我就选择直接用iframe标签
var bq='<iframe frameborder="0" width="100%" height="40%" '+ src+' allowfullscreen></iframe>' this.value += bq
总结
以上所述是小编给大家介绍的vue富文本框(插入文本、图片、视频)的使用及问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 巧用枚举类型,实现项目的多语言切换
- 影响Java调用性能有哪些因素
- 如何为可扩展系统进行Java Socket编程
- 如何使用Windows卷影拷贝服务恢复文件和文件夹
- .net字符串数组查找方式效率比较
- 使用Ring Buffer构建高性能的文件写入程序
- 一行代码调用实现带字段选取+条件判断+排序+分页功能的增强ORM框架
- PDF.NET数据开发框架实体类操作实例
- 利用Burp Suite对OWASP Juice Shop进行渗透测试
- Java同步问题面试知识学习
- Android UI控件系列:LinearLayout(线性布局)
- 使用操作符重载,生成ORM实体类的SQL条件语句
- Dance In Heap(四):一些堆利用的方法(下)
- Mac系统的Proton恶意软件:卷!土!重!来!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何使用Python的Flask和谷歌app Engine来构建一个web app
- 如何用Python实现电子邮件的自动化
- 在Win下安装Visual Studio和Parallel Studio XE
- 我们将项目语言从Python转向Go的5个原因
- GFN-xTB的编译与API使用
- 红外光谱的理论计算
- 一起刷题(leetcode)第二篇:如何用Python实现递归
- 如何成为Python的数据操作库Pandas的专家?
- 谈谈Gaussian软件中的guess=mix
- 用ORCA做DLPNO-CCSD(T)计算
- Fortran调用C函数
- 在Python中创建命令行界面的最佳方式
- Diels-Alder反应的区域选择性分析
- 传说中的画图神器Plotnine,Python中的ggplot2
- 用ORCA做结构优化及轨迹查看