vue插入富文本编辑器(支持视频和图片的上传)
今天在VUE里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正。
我这里使用的是元素的用户界面的上传图片组件
首先引入元素的UI(这个我就不作赘述了,详情参考element-ui官方文档)
在引入富文本组件VUE-鹅毛笔编辑器
使用在main.js引入相应的样式
现在就可以在VUE中使用富文本
这里需要注意的是editorOption是必须要配置的
其样式由于没有在模块配置工具拦所以它的出事显示就较为简洁
如果需要上传图片或者视频就需要对模块里面对工具栏进行改造重构(使用处理程序)
配置好了过后会发现整个富文本编辑器的工具栏没有改变,还是只保留了几个基本的富文本功能。
这个是因为处理程序是用来定义自定义程序的,而添加自定义处理程序就会覆盖它本省的工具栏和主体行为所以我们还要再自行配置下自己需要的工具栏,所有功能的配置如下,大家也可以按需配置
此时的文本工具就会丰富了
这样它的工具栏就会有上传图片和视频的接口,然后你就可以在工具拦的配置里的图像和视频里配置上传图片或视频,可以根据它的点击来给他相应的处理回应,也可以为其重新定向事件,这里我这里给大家介绍重新定向事件
首先定义一个上传组件,我这里用的是自己写好的上传组件
设置好相应属性值和事件
这里需要注意的是如果想直接实现上传的话就需要在工具栏设置点击图片上传的时候用指针函数将这种锁定再做其他操作
由于我是自己写的上传所以要插入到富文本内部所以添加内容的时候需要加入IMG标签,因为富文本内部是支持图片的解析的
做到这里一个支持上传图片的富文本就做好了,再来说下视频,由于引入的富文本绝大多数都是没有内置的播放器所以视频标签在富文本里面会失效,在这里我就选择直接用IFRAME标签
以上就是我对VUE引入富文本的一点小理解,希望大家多多指点哦
转载于:https://www.cnblogs.com/tanshao/p/9487785.html
vue插入富文本编辑器(支持视频和图片的上传)相关推荐
- 使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显 一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...
- vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址 说明: 支持 vue-cli 2.x 支持 ...
- vue+summernote富文本编辑器
vue+summernote富文本编辑器 最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- UEditor +数学公式+ Vue+ Kityformula 富文本编辑器嵌入数学公式的实现
UEditor +数学公式+ Vue + Kityformula 富文本编辑器嵌入数学公式的实现 首先展示一下代码实现后的效果: 现在我们开始写代码 第一步:我们需要去下载Ueditor官方的包:Ue ...
- vue-quill-editor富文本编辑器-扩展表格、图片调整大小
上篇文章已经讲到.vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用(这两个目前quill 版本并不兼容 如果有大神解决了还望指点 ...
- php ios视频文件上传,iOS实现视频和图片的上传思路
关于iOS如何实现视频和图片的上传, 我们先理清下思路,然后小编根据思路一步一步给大家详解实现过程. 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. ...
- Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...
- Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景 系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
- VUE 集成富文本编辑器及踩坑记录
一.查看 vue版本和vue cli版本 首先要知道自己所使用的VUE 版本和 脚手架(VUE CLI)版本 这样自己无论是在百度的时候还是选择富文本编辑器对应版本的时候都方便很多 1.查看vue 版 ...
最新文章
- 前端工程师的CI进阶之路
- android 生命周期流程图,Android Studio ——Service的生命周期
- 【SpringCloud】Ribbon 负载均衡
- 【数学建模】通过调整飞行角度使飞机顺利飞行(Matlab)
- Spring mvc框架下使用kaptcha生成验证码
- Linux查看、运行和杀死java进程
- 关于安装更新office版本时,需要卸载office所遇到的问题
- 带领初学者学习 SQL 数据库编程视频教程(28 个视频)
- 整理一下自动生成代码的软件
- Android 集成科大讯飞语音并实现语音识别
- 国二考试报Wps还是c语言,2021 年全国计算机二级增考 WPS Office
- 微信小程序开发者文档教程,从入门到精通 (附超过100个完整项目源代码、文档)
- HTML教程: 网页字体的设置浅谈
- python爬虫之通用爬虫和聚焦爬虫
- 电脑连上了WiFi,却发现没有网(昨天还好好的)
- EFT4 生成实体类
- c语言signed int与unsigned int的运算
- M8 解决 无法用blt 半透明和AlphaBlt实现关键色的问题。
- ArcGIS9.3的注册码
- google开源服务器apprtc的搭建
热门文章
- 微型计算机主机作用,微型计算机的主机包括()。
- python的符号lt和gt怎么输入_lt;lt;Python基础教程gt;gt;学习笔记 | 第04章 | 字典...
- 【POJ3784】【对顶堆 — 动态维护中位数】Running Media
- 【POJ 2456】【二分答案】Aggressive cows(暑假 No.1)
- 加载字典文件,扫描网站潜在目录
- 陕西省单招计算机应用考什么,陕西省对口单招计算机应用基础模拟试题四
- 偶们院就业相关政策及问题解答----吃面
- docker 报错:x509: certificate has expired or is not yet valid
- Linux Linux程序练习十(网络编程大文件发送)
- 安卓问题报告小记(四):Some projects cannot be imported because they already exist in the workspace...