热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了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中使用富文本


这里需要注意的是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里配置上传图片或视频,可以根据它的点击来给他相应的处理回应,也可以为其重新定向事件,这里我这里给大家介绍重新定向事件

首先定义一个上传组件,我这里用的是自己写好的上传 组件

设置好相应属性值和事件


这里需要注意的是如果想直接实现上传的话就需要在工具栏设置点击图片上传的时候用指针函数将this锁定再做其他操作

由于我是自己写的上传所以要插入到富文本内部所以添加内容的时候需要加入img标签,因为富文本内部是支持图片的解析的

AddInputUrl(data) {
  var a = data
  var tp = a.length
  var imghz = a.slice(tp - 4, tp)
  var src = 'src="' + a + '"'
  var bq = ""
  this.value += bq
}

做到这里一个支持上传图片的富文本就做好了,再来说下视频,由于引入的富文本绝大多数都是没有内置的播放器所以video标签在富文本里面会失效,在这里我就选择直接用iframe标签

var bq=''
this.value += bq

总结

以上所述是小编给大家介绍的vue富文本框(插入文本、图片、视频)的使用及问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本文介绍了一个免费的asp.net控件,该控件具备数据显示、录入、更新、删除等功能。它比datagrid更易用、更实用,同时具备多种功能,例如属性设置、数据排序、字段类型格式化显示、密码字段支持、图像字段上传和生成缩略图等。此外,它还提供了数据验证、日期选择器、数字选择器等功能,以及防止注入攻击、非本页提交和自动分页技术等安全性和性能优化功能。最后,该控件还支持字段值合计和数据导出功能。总之,该控件功能强大且免费,适用于asp.net开发。 ... [详细]
  • 使用chrome编辑器实现网页截图功能的方法
    本文介绍了在chrome浏览器中使用编辑器实现网页截图功能的方法。通过在地址栏中输入特定命令,打开控制台并调用命令面板,用户可以方便地进行网页截图操作。 ... [详细]
  • Unity3D引擎的体系结构和功能详解
    本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具,用于创建交互式3D应用程序。它由游戏引擎和编辑器组成,支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费,适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文介绍了三种方法来关闭win7电脑开机硬盘自检,分别是使用命令提示符、注册表编辑器和bios设置界面。通过取消硬盘自检可以加快电脑启动速度。详细步骤和操作说明在正文中有详细介绍。 ... [详细]
  • OC渲染器和阿诺德渲染器的特点及适用范围
    本文介绍了C4D软件自带的渲染器效果较差的问题,并推荐了四款C4D渲染器,其中包括OC渲染器和阿诺德渲染器。OC渲染器渲染速度快,简单易用,特别适合小团队和个人使用,而阿诺德渲染器具有超快的预览功能和真实的渲染效果,适合在体积光处理方面使用。两款渲染器都支持多个C4D版本和不同操作系统。 ... [详细]
  • 如何实现JDK版本的切换功能,解决开发环境冲突问题
    本文介绍了在开发过程中遇到JDK版本冲突的情况,以及如何通过修改环境变量实现JDK版本的切换功能,解决开发环境冲突的问题。通过合理的切换环境,可以更好地进行项目开发。同时,提醒读者注意不仅限于1.7和1.8版本的转换,还要适应不同项目和个人开发习惯的需求。 ... [详细]
  • 如何更改电脑系统的自动校时服务器地址?
    本文介绍了如何通过注册表编辑器更改电脑系统的自动校时服务器地址。通过修改注册表中的数值数据或新建字符串数值的方式,可以将默认的时钟同步服务器地址更改为自己所需要的域名或IP地址。详细步骤包括双击时间区域,点击internet时间,勾选自动校正域名设置定时等操作。 ... [详细]
  • OCI连接MySQL_PLSQL Developer连接远程数据库OCI客户端安装方法
    本文介绍了使用OCI客户端连接MySQL和PLSQL Developer连接远程数据库的安装方法,避免了在本地安装Oracle数据库或类似的开发套件的麻烦,同时解决了PLSQL Dev连接远程Oracle时的配置问题。 ... [详细]
  • 开发笔记:spring boot项目打成war包部署到服务器的步骤与注意事项
    本文介绍了将spring boot项目打成war包并部署到服务器的步骤与注意事项。通过本文的学习,读者可以了解到如何将spring boot项目打包成war包,并成功地部署到服务器上。 ... [详细]
  • 本文介绍了Windows Vista操作系统中的用户账户保护功能,该功能是为了增强系统的安全性而设计的。通过对Vista测试版的体验,可以看到系统在安全性方面的进步。该功能的引入,为用户的账户安全提供了更好的保障。 ... [详细]
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
  • wordpress的内页悬浮选项卡功能预览及使用方法介绍
    本文介绍了wordpress的内页悬浮选项卡功能,包括功能预览和使用方法。用户可以自定义切换按钮,设置锚点信息区域,灵活多变且无需代码编辑。文章可以统一设置按钮,也可以独立设置单篇文章的按钮,滚动模式下按钮以滑动形式展示,具有条理性和锚点属性,有利于SEO。滚动效果增加了网站的互动性,让用户参与互动,同时完全兼容手机,使信息展示更清晰。 ... [详细]
  • 本文介绍了在Linux中执行.sh脚本时出现/bin/sh^M: bad interpreter: No such file or directory异常的原因分析,并提供了两种解决方法:在Windows下进行编码格式转换,或在Linux中修改文件格式和执行权限。具体操作步骤也在摘要中给出。 ... [详细]
  • 本文介绍了常用的编辑器快捷键,包括快速转换编辑器、浏览选项卡、提取本地变量和方法、编辑器窗口最大化等功能。通过使用这些快捷键,可以提高编辑器的使用效率,减少复杂度,并提升代码的可测试性。 ... [详细]
author-avatar
诸子百家101_350
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有