vue-quill-editor(富文本) 在 vue 中如何使用

2024-01-29 18:38

本文主要是介绍vue-quill-editor(富文本) 在 vue 中如何使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  1. 安装 vue-quill-editor
    npm install vue-quill-editor -S
  2. 安装quill
    npm install quill -S
  3. 引入
    import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
    import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式 三种样式三选一引入即可
    //import 'quill/dist/quill.core.css'
    //import 'quill/dist/quill.bubble.css'
    import * as Quill from 'quill'; // 富文本基于quill
  4. 使用

<!-- template部分 -->

<quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@focus="onEditorFocus($event)"@blur="onEditorBlur($event)"@change="onEditorChange($event)">
</quill-editor>

<!-- js data部分 -->

``

editor: null,   // 富文本编辑器对象
content: `<p></p><p><br></p><ol></ol>`, // 富文本编辑器默认内容
editorOption: { //  富文本编辑器配置modules: {toolbar: '#toolbar'},theme: 'snow',placeholder: '请输入正文'
},

<!-- js mounted部分 -->

this.editor = this.$refs.myQuillEditor.quill;

<!-- js beforeDestroy部分 -->

this.editor = null;
delete this.editor;

<!-- js methods部分 -->

// 准备富文本编辑器
onEditorReady (editor) {},
// 富文本编辑器 失去焦点事件
onEditorBlur (editor) {},
// 富文本编辑器 获得焦点事件
onEditorFocus (editor) {},
// 富文本编辑器 内容改变事件
onEditorChange (editor) {},

<!-- js components部分 -->

components: {quillEditor
}
  1. 如果想自定义工具栏:
<!-- template部分 -->
<div id="toolbar" slot="toolbar"><button class="ql-bold" title="加粗">Bold</button><select class="ql-header" title="段落格式"><option selected>正文</option><option value="2">标题1</option><option value="3">标题2</option><option value="4">标题3</option></select><button class="ql-list" value="ordered" title="有序列表"></button><button class="ql-list" value="bullet" title="无序列表"></button><select class="ql-color" value="color" title="字体颜色"></select><span class="icon-pic custom-icon" title="图片" @click="insertImgClick($event)"></span>  <!-- 插入图片 --><span class="icon-video custom-icon" title="视频" @click="insertImgClick($event)"></span>  <!-- 插入视频 -->
</div>
<input style="display: none;" type="file" id="insert_image" @change="fileInsert($event)">  <!-- 选择图片input -->
<input style="display: none;" type="file" id="insert_video" @change="fileInsert($event)">  <!-- 选择视频input --><!-- js methods部分 -->
// 富文本编辑器 点击插入图片或者视频
insertImgClick (e) {if (e.target.className.indexOf('icon-pic') != -1) {document.getElementById('insert_image').click();} else if (e.target.className.indexOf('icon-video') != -1) {document.getElementById('insert_video').click();}
},
// 富文本编辑器 点击插入图片或者视频上传并预览
fileInsert (e) {var oFile = e.target.files[0];if (typeof (oFile) === 'undefined') {return;}let sExtensionName = oFile.name.substring(oFile.name.lastIndexOf('.') + 1).toLowerCase();   // 文件扩展名let sfileType = ''; // 上传文件类型if (e.target.id == 'insert_image') {sfileType = 'image'if (sExtensionName !== 'png' && sExtensionName !== 'jpg' && sExtensionName !== 'jpeg') {alert('不支持该类型图片');return;}}if (e.target.id == 'insert_video') {sfileType = 'video';if (sExtensionName !== 'mp4' && sExtensionName !== 'avi' && sExtensionName !== 'mov') {alert('不支持该类型视频');return;}let maxSize = 100*1024*1024;    // 100MBif (oFile.size > maxSize) {alert('上传视频大小不能超过100MB');return;}}var reader = new FileReader();reader.readAsDataURL(oFile);reader.onloadend = () => {let formData = new FormData(); // 通过formdata上传formData.append('file', oFile);let sUrl = '';if (sfileType == 'image') {sUrl = 'Pic';}if (sfileType == 'video') {sUrl = 'Vie';}var url = this.api_config + '/dealerIndex/upload' + sUrl + '.htm';this.axios.post(url, formData, {headers: { 'Content-Type': 'multipart/form-data' }}).then((res) => {this.editor.insertEmbed(this.editor.selection.savedRange.index, sfileType, res.data.data);  // 这个方法用来手动插入dom到编辑器里let isAndroid = this.$is_android(); // 判断是ios还是androidif (isAndroid) {$('video').removeAttr('controls');$('video').attr('x5-video-player-type', 'h5');}this.editor.setSelection(this.editor.selection.savedRange.index + 1);  // 这个方法可以获取光标位置}).catch((response) => {console.log('失败', response);})}
},
关于编辑器里面的一些操作可以到quill官方查看,用法和配置项的的介绍很详细,很好用
  1. 如果想更好地操作插入的video,可以把iframe改成h5的video,通过下面这段代码:
import { Quill } from 'vue-quill-editor'// 源码中是import直接倒入,这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')const ATTRIBUTES = ['height', 'width']class Video extends BlockEmbed {static create (value) {const node = super.create(value)// 添加video标签所需的属性node.setAttribute('controls', 'controls')   // 控制播放器node.setAttribute('type', 'video/mp4')node.setAttribute('style', 'object-fit:fill;width: 100%;')node.setAttribute('preload', 'auto')    // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频node.setAttribute('webkit-playsinline', 'true') // 兼容ios 不全屏播放node.setAttribute('playsinline', 'true')node.setAttribute('x-webkit-airplay', 'allow')// node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放node.setAttribute('x5-video-player-fullscreen', 'true')    // 全屏设置,设置为 true 是防止横屏node.setAttribute('src', this.sanitize(value))return node}static formats (domNode) {return ATTRIBUTES.reduce((formats, attribute) => {if (domNode.hasAttribute(attribute)) {formats[attribute] = domNode.getAttribute(attribute)}return formats}, {})}static sanitize (url) {return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member}static value (domNode) {return domNode.getAttribute('src')}format (name, value) {if (ATTRIBUTES.indexOf(name) > -1) {if (value) {this.domNode.setAttribute(name, value)} else {this.domNode.removeAttribute(name)}} else {super.format(name, value)}}html () {const { video } = this.value()return `<a href="${video}">${video}</a>`}
}
Video.blotName = 'video' // 这里不用改,楼主不用iframe,直接替换掉原来,如果需要也可以保留原来的,这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframeexport default Video
然后再把它引入到有编辑器的那个文件里:import Video from '../../plugins/video.js'; // 插入h5 video视频
Quill.register(Video, true);  // 注册video

就是这么多了~~~

这篇关于vue-quill-editor(富文本) 在 vue 中如何使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/657828

相关文章

Java中的Cursor使用详解

《Java中的Cursor使用详解》本文介绍了Java中的Cursor接口及其在大数据集处理中的优势,包括逐行读取、分页处理、流控制、动态改变查询、并发控制和减少网络流量等,感兴趣的朋友一起看看吧... 最近看代码,有一段代码涉及到Cursor,感觉写法挺有意思的。注意是Cursor,而不是Consumer

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Linux使用cut进行文本提取的操作方法

《Linux使用cut进行文本提取的操作方法》Linux中的cut命令是一个命令行实用程序,用于从文件或标准输入中提取文本行的部分,本文给大家介绍了Linux使用cut进行文本提取的操作方法,文中有详... 目录简介基础语法常用选项范围选择示例用法-f:字段选择-d:分隔符-c:字符选择-b:字节选择--c