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 相关文章推荐
js判断是否为数组的函数: isArray()
Oct 30 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
js 调用百度分享功能
Feb 27 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
react+antd 递归实现树状目录操作
Nov 02 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
简单了解JavaScript异步
2019/05/23 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
详解Python中的多线程编程
2015/04/09 Python
Python中获取对象信息的方法
2015/04/27 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
django中静态文件配置static的方法
2018/05/20 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
用Python解数独的方法示例
2019/10/24 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
编辑求职信样本
2013/12/16 职场文书
财务情况说明书范文
2014/05/06 职场文书
学校标语大全
2014/06/19 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
营销经理工作检讨书
2014/11/03 职场文书
黄石寨导游词
2015/02/05 职场文书
医生个人年终总结
2015/02/28 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
python全面解析接口返回数据
2022/02/12 Python