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二级地域选择的实现方法
Jun 17 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
浅析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制作简单的内容采集器的代码
2007/11/28 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php中的静态变量的基本用法
2014/03/20 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP中的self关键字详解
2019/06/23 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
详解jQuery选择器
2016/12/21 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python实现多线程下载文件的代码实例
2014/06/01 Python
用python读写excel的方法
2014/11/18 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
tensorflow多维张量计算实例
2020/02/11 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
python代码实现图书管理系统
2020/11/30 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
医学生个人求职信范文
2014/02/07 职场文书
老师对学生的寄语
2014/04/09 职场文书
学生党员检讨书范文
2014/12/27 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript