vue富文本框(插入文本、图片、视频)的使用及问题小结


Posted in Javascript onAugust 17, 2018

今天在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);
     }
    },
    }
   }
   }

配置好了过后会发现整个富文本编辑器的工具栏没有改变,还是只保留了几个基本的富文本功能。

vue富文本框(插入文本、图片、视频)的使用及问题小结

这个是因为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
 ]

此时的文本工具就会丰富了

vue富文本框(插入文本、图片、视频)的使用及问题小结

这样它的工具栏就会有上传图片和视频的接口,然后你就可以在工具拦的配置里的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富文本框(插入文本、图片、视频)的使用及问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 #Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 #Javascript
layer弹出层全屏及关闭方法
Aug 17 #Javascript
vue+iview+less 实现换肤功能
Aug 17 #Javascript
You might like
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
JS表的模拟方法
2015/02/05 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python 错误和异常小结
2013/10/09 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
关于python3中setup.py小概念解析
2019/08/22 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
致百米运动员广播稿
2014/01/29 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
车间主任岗位职责
2015/02/03 职场文书
团员自我评价范文
2015/03/10 职场文书
倡议书格式及范文
2015/04/29 职场文书
教师素质教育心得体会
2016/01/19 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
Python学习之os包使用教程详解
2022/03/21 Python