您现在的位置是:首页 > 正文

Vue中如何使用vue-quill-editor富文本编辑器

2024-04-01 07:25:39阅读 6
首先安装插件
npm install vue-quill-editor -S(或者--save)
引入富文本编辑器的文件
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>
	<div>
		<quill-editor class="editor"
		    ref="myTextEditor"
		    v-model="contents"
		    :options="editorOption"
		    @blur="onEditorBlur($event)"
		    @focus="onEditorFocus($event)"
		    @ready="onEditorReady($event)"
		    @change="onEditorChange($event)">
		</quill-editor>
	</div>
</template>

<script>
	let debounce = (function() {
		let timer = null
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms);
		}
	})()
	export default{
        name: 'editor-quill',
		props:['content','placeholders'],
		data(){
			return {
				contents: this.content,
				editorOption: {
					modules: {
						toolbar: [
						  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
						  // ["blockquote", "code-block"], // 引用  代码块
						  [{ header: 1 }, { header: 2 }], // 1、2 级标题
						  // [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
						  // [{ script: "sub" }, { script: "super" }], // 上标/下标
						  // [{ indent: "-1" }, { indent: "+1" }], // 缩进
						  // [{'direction': 'rtl'}],                         // 文本方向
						  [{ size: ["small", false, "large", "huge"] }], // 字体大小
						  // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
						  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
						  // [{ font: [] }], // 字体种类
						  // [{ align: [] }], // 对齐方式
						  // ["clean"], // 清除文本格式
						  ["link", "image", "video"] // 链接、图片、视频
						], //工具菜单栏配置
				  },
				  placeholder: this.placeholders, //提示
				  readyOnly: false, //是否只读
				  theme: 'snow', //主题 snow
				  syntax: true, //语法检测
				}
			}
		},
		methods:{
			 onEditorBlur(editor) {},
			// 获得焦点
			onEditorFocus(editor) {},
			// 开始
			onEditorReady(editor) {},
			// 值发生变化
			onEditorChange(editor) {
				debounce(() => {
					this.contents = editor.html;
					this.$emit("getMessage",editor.html)
				},1000)
			}
		},
		computed:{
            editor() {
                return this.$refs.myTextEditor.quillEditor;
            }
		}
	}
</script>

<style scoped>
	.editor {
	  line-height: normal !important;
	}
	.editor /deep/ .ql-editor{
		height: 80px;
	}
	.ql-snow .ql-tooltip[data-mode=link]::before {
	  content: "请输入链接地址:";
	}
	.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
	    border-right: 0px;
	    content: '保存';
	    padding-right: 0px;
	}
	 
	.ql-snow .ql-tooltip[data-mode=video]::before {
	    content: "请输入视频地址:";
	}
	 
	.ql-snow .ql-picker.ql-size .ql-picker-label::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item::before {
	  content: '14px';
	}
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
	  content: '10px';
	}
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
	  content: '18px';
	}
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
	  content: '32px';
	}
	 
	.ql-snow .ql-picker.ql-header .ql-picker-label::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item::before {
	  content: '文本';
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
	  content: '标题1';
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
	  content: '标题2';
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
	  content: '标题3';
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
	  content: '标题4';
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
	  content: '标题5';
	}
	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
	  content: '标题6';
	}
	 
	.ql-snow .ql-picker.ql-font .ql-picker-label::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item::before {
	  content: '标准字体';
	}
	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
	  content: '衬线字体';
	}
	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
	  content: '等宽字体';
	}
</style>

这一段代码也是参考了其他大佬写的,自己加以修改,因为这既然是引用了封装,那么在父组件中就需要获取到编辑器中的内容,所以我提供了一个emit可触发父组件中的事件,但是如果在那个变化的函数中只写一个emit,你会发现他只要输入一个字符就会进行传输,所以此处就可以采用防抖技术来控制这个弊端。具体的可以参考官方文档。

网站文章

  • Nacos心跳机制实现快速上下线

    Nacos心跳机制实现快速上下线

    数据库的重要性不言而喻,不管是什么系统,什么应用软件,也不管它们是 Windows 上的应用程序,还是 Web 应用程序,存储(持久化)和查询(检索)数据都是核心的功能。大家学习数据库时,比如 MySQL 这个数据库管理系统,都是在 CLI(Command Line Interface)上操作数据库的,现在,我们看看,在 Java Web 中,我们如何使用 Java 去操作数据库。

    2024-04-01 07:25:31
  • 索引本质

    索引本质

    https://www.cnblogs.com/novalist/p/6410964.html索引的本质MySQL官方对于索引的定义为:索引是帮助MySQL高效获取数据的数据结构。即可以理解为:索引是...

    2024-04-01 07:24:51
  • duilib中CTextUI控件设置文字时不刷新显示的bug

    duilib中CTextUI控件设置文字时不刷新显示的bug

    duilib CTextUI 文字不刷新显示

    2024-04-01 07:24:44
  • Dockerfile构建mysql 最新发布

    Dockerfile构建mysql 最新发布

    33062是主机的端口,3306是容器的mysql端口,容器名称–name mysql2,-v文件映射 主机/dockerval/mysql2对应/var/lib/mysql,最后mysql2是镜像名...

    2024-04-01 07:24:37
  • ajax异步调试,实现AJAX的基本步骤

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、UR...

    2024-04-01 07:24:31
  • 安装Kibana,kibana的使用教程

    安装Kibana,kibana的使用教程

    Kibana是一个针对ElasticSearch的开源分析及可视化平台,用来搜索、查看交互存储在ElasticSearch索引中的数据。使用Kibana,可以通过各种图表进行高级数据分析及展示。Kib...

    2024-04-01 07:23:49
  • 【教程】PDF组件Spire.PDF 教程:如何在C#,VB.NET中将HTML样式化文本插入PDF

    【教程】PDF组件Spire.PDF 教程:如何在C#,VB.NET中将HTML样式化文本插入PDF

    Spire.PDF 是一个专业的PDF组件,能够独立地创建、编写、编辑、操作和阅读PDF文件,支持 .NET、WPF和Silverlight三个版本,本文介绍了如何通过Spire.PDF 在如何在C#,VB.NET中将HTML样式化文本插入PDF。

    2024-04-01 07:23:42
  • WPF 获取DataGrid里的模板内的ComboBox控件

    DataGridTemplateColumn tempColumn1 = GridName.Columns[0] as DataGridTemplateColumn; FrameworkElement...

    2024-04-01 07:23:36
  • electron 应用打包配置

    electron 应用打包配置

    一、安装 electron-buildernpm install electron-builder --save-dev二、 在 package.json 中配置文件{ "name": "cloud...

    2024-04-01 07:22:53
  • CentOS7 防火墙

    CentOS7 防火墙

    用centos7会发现,用以前的方式查看、打开和关闭防火墙都无效了。这是因为centos7的防火墙改用firewalld,而不再使用iptables了。1、先是看centos7的防火墙的状态,查看的命令为:sudo systemctl status firewalld.service或者sudo systemctl status firewalld或者systemctl status fi...

    2024-04-01 07:22:45