VUE 项目中富文本编辑器的使用 （vue-quill-editor）？

最新推荐文章于 2024-07-12 15:45:55 发布
最新推荐文章于 2024-07-12 15:45:55 发布
阅读量464 收藏
点赞数 1
分类专栏： vue2.x ，vue_cli Plug-ins and class libraries 文章标签： VUE 富文本编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44722915/article/details/119605104
版权

vue-quill-editor 相关使用

前言：如何实现嵌入富文本编辑器，让用户编写文章的需求 ？在 VUE 项目中，选择使用轻量化的 vue-quill-editor 插件 去完成实现 。这里主要对其使用过程，样式优化做一个总结 。

项目中安装依赖 （推荐使用 cnpm ，淘宝镜像）

npm i --save vue-quill-editor
// 或者
cnpm i --save vue-quill-editor

组件中引入插件 （局部引入，注册）

// 引入 vue-quill-edito 组件
import { quillEditor } from 'vue-quill-editor'
// 引入组件相关样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
...
// 组件注册
components: {
	quillEditor
}

 组件中基础使用

<!-- 基础使用 -->
<template>
	<div>
		<quill-editor
			v-model="content"
			:options="editorOption"
			@blur="onEditorBlur($event)"
			@focus="onEditorFocus($event)"
			@ready="onEditorReady($event)"
			@change="onEditorChange($event)"
            class="editor"
		/>
	</div>
</template>

<script>
    // 引入 vue-quill-edito 组件
	import { quillEditor } from 'vue-quill-editor'
    // 引入组件相关样式文件
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	export default {
		name: 'Test',
        // 组件注册
		components: {
			quillEditor
		},
		data() {
			return {
                // 富文本编辑器默认内容
				content: '',
                // 富文本编辑器配置
				editorOption: {}
			}
		},
		methods: {
			// 失去焦点事件
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件
			onEditorChange({ quill, html, text }) {
				console.log('editor change!', quill, html, text)
				this.content = html
			}
		}
	}
</script>

<style lang="css" scoped>
	.editor {
		width: 1200px;
		height: 500px;
		margin: 20px auto;
	}
</style>

工具栏配置对象

  • 工具栏配置对象（注释，可以控制工具栏功能控件的有无）
    // 工具栏配置
	const toolbarOptions = [
        // [加粗，斜体，下划线，删除线]
		['bold', 'italic', 'underline', 'strike'], 
        // [引用，代码块]
		['blockquote', 'code-block'], 
        // [1 级标题，2 级标题]
		[{ header: 1 }, { header: 2 }],
        // [有序列表，无序列表]
		[{ list: 'ordered' }, { list: 'bullet' }], 
        // [上标，下标]
		[{ script: 'sub' }, { script: 'super' }], 
        // [左缩进，右缩进]
		[{ indent: '-1' }, { indent: '+1' }],
        // [文本方向] 
		[{ direction: 'rtl' }], 
        // [字体大小]
		[{ size: ['small', false, 'large', 'huge'] }],
        // [1-6 级标题]
		[{ header: [1, 2, 3, 4, 5, 6, false] }], 
        // [字体颜色，字体背景颜色]
		[{ color: [] }, { background: [] }],
        // [字体种类] 
		[{ font: [] }], 
        // [对齐方式]
		[{ align: [] }], 
        // [清除文本格式]
		['clean'], 
        // [链接，图片，视频]
		['link', 'image', 'video'] 
    ]
  • data 中的 editorOption 写法变更 
//富文本编辑器配置
editorOption: {
	modules: {
		//工具栏定义的
		toolbar: toolbarOptions
	},
	//主题
	theme: 'snow',
	placeholder: '请输入正文'
}

更改中文工具栏显示（拷贝下面代码到组件 style 中，或外部新建文件引入）

   .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: '等宽字体';
	}

工具栏添加鼠标悬浮中文提示

  • titleConfig,js  文件（外部新建标题配置文件）
const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '背景颜色',
  'ql-size': '字体大小',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-underline': '下划线',
  'ql-blockquote': '引用',
  'ql-header': '标题',
  'ql-indent': '缩进',
  'ql-list': '列表',
  'ql-align': '文本对齐',
  'ql-direction': '文本方向',
  'ql-code-block': '代码块',
  'ql-formula': '公式',
  'ql-image': '图片',
  'ql-video': '视频',
  'ql-clean': '清除字体样式'
};

export function addQuillTitle() {
  const oToolBar = document.querySelector('.ql-toolbar'),
    aButton = oToolBar.querySelectorAll('button'),
    aSelect = oToolBar.querySelectorAll('select');
  aButton.forEach(function (item) {
    if (item.className === 'ql-script') {
      item.value === 'sub' ? item.title = '下标' : item.title = '上标'
    } else if (item.className === 'ql-indent') {
      item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
    } else {
      item.title = titleConfig[item.classList[0]]
    }
  });
  aSelect.forEach(function (item) {
    item.parentNode.title = titleConfig[item.classList[0]]
  })
}
  • 组件中引入，mounted 中触发相关函数
import { addQuillTitle } from '../assets/js/title'
......
mounted() {
	this.$nextTick(() => {
		// 富文本提示信息
		addQuillTitle()
	})
}

完整示例组件

<!-- 工具栏汉化，添加悬浮提示 -->
<template>
	<div>
		<quill-editor
			v-model="content"
			:options="editorOption"
			@blur="onEditorBlur($event)"
			@focus="onEditorFocus($event)"
			@ready="onEditorReady($event)"
			@change="onEditorChange($event)"
            class="editor"
		/>
	</div>
</template>

<script>
	// 引入 vue-quill-edito 组件
    import { quillEditor } from 'vue-quill-editor'
    // 引入组件相关样式文件
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    // 引入外部控制栏提示文件
	import { addQuillTitle } from '../assets/js/title'
	 // 工具栏配置
	const toolbarOptions = [
        // [加粗，斜体，下划线，删除线]
		['bold', 'italic', 'underline', 'strike'], 
        // [引用，代码块]
		['blockquote', 'code-block'], 
        // [1 级标题，2 级标题]
		[{ header: 1 }, { header: 2 }],
        // [有序列表，无序列表]
		[{ list: 'ordered' }, { list: 'bullet' }], 
        // [上标，下标]
		[{ script: 'sub' }, { script: 'super' }], 
        // [左缩进，右缩进]
		[{ indent: '-1' }, { indent: '+1' }],
        // [文本方向] 
		[{ direction: 'rtl' }], 
        // [字体大小]
		[{ size: ['small', false, 'large', 'huge'] }],
        // [1-6 级标题]
		[{ header: [1, 2, 3, 4, 5, 6, false] }], 
        // [字体颜色，字体背景颜色]
		[{ color: [] }, { background: [] }],
        // [字体种类] 
		[{ font: [] }], 
        // [对齐方式]
		[{ align: [] }], 
        // [清除文本格式]
		['clean'], 
        // [链接，图片，视频]
		['link', 'image', 'video'] 
    ]
	export default {
		name: 'Test',
        // 组件注册
		components: {
			quillEditor
		},
		data() {
			return {
				// 富文本编辑器默认内容
				content: '',
				// 富文本编辑器配置
				editorOption: {
					modules: {
						// 工具栏定义
						toolbar: toolbarOptions
					},
					// 主题
					theme: 'snow',
					placeholder: '请输入正文'
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				// 富文本提示信息
				addQuillTitle()
			})
		},
		methods: {
			// 失去焦点事件
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件
			onEditorChange({ quill, html, text }) {
				console.log('editor change!', quill, html, text)
				this.content = html
			}
		}
	}
</script>

<style lang="css">
	.editor {
		line-height: normal !important;
		width: 1200px;
		height: 500px;
		margin: 20px auto;
	}
	.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>

【完整示例查看：https://gitee.com/wu241617/rich-text-editor】

『九离~空白』
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 富文本编辑器 vue-quill-editor
m0_48895571的博客
04-01 603
Vue 富文本编辑器 vue-quill-editor
vue中富文本编辑框 vue-quill-editor 无法触发验证问题与验证提示无法取消
weixin_58207509的博客
11-01 2941
今天用vue-quill-editor过程中发现 vue-quill-editor 无法触发验证只有当点击确定才能触发 上网搜了一下大致解决流程如下 1 自定义一个 事件 <el-form-item label="题干:" prop="questionss"> //验证字段 <quill-editor ref="text" v-model="form.question" ..
Vuehtml5editor是一个Vue的富文本编辑器插件
08-07
Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11.
vue-quill-editor汉化
lao_wang_tou的博客
03-09 1943
.ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px" !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=...
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
最新发布
2401_85158083的博客
07-12 1402
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
【避坑指南】vue3使用富文本编辑器vueQuillEditor
weixin_43951592的博客
11-24 2673
vue3富文本
vue 实现富文本（quill-editor 插件）
记录常见的问题以及解决办法
11-15 911
vue template （html代码）具体一些属性配置可以参考。main.js 中引入。
vue整合WangEditor
liyu121的博客
04-13 1535
一：安装依赖 cnpm install wangeditor 二：vue环境引入WangEditor 1.html： <template> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="edi...
vue-quill-editor富文本编辑器的汉化版 及 使用心得
热门推荐
weixin_44781409的博客
07-03 1万+
现在网上上有很多的富文本编辑器，但我个人还是非常喜欢Vue家族的vue-quill-deitor，虽然说它只支持IE10+ 好 , 废话不多说直接上代码，现在是见证奇迹的时刻, 在vue中使用quill呢，我们需要npm进行安装，安装命令如下： 第一步下载 : npm i vue-quill-editor -D 第二步安装依赖 : npm i quill -D 第三步全局引用 //在mai...
vue-quill-editor富文本编辑器(图片使用base64或自定义上传,最大字数限制等功能)
EnidChann的博客
12-16 1834
前置操作: 1.下载: "quill": "^1.3.7", "quill-image-resize-module": "^3.0.0", "vue-quill-editor": "^3.0.6", 2.config配置— vue.config.js (脚手架3.x版本) chainWebpack (config) { ... config.plugin('provide').use(webpack.ProvidePlugin, [ { 'wi
vue-quill-editor富文本编辑器的使用（实现图片/文件上传）
MoMo@blog
12-04 7669
目录实现效果编辑器配置基本配置实现图片上传实现文件上传 实现效果 文本编辑的三个功能分别是：添加链接，上传图片，上传文件 编辑器配置 基本配置 <template> <quill-editor class="editor" ref="QuillEditor" v-model="detail" :options="editorOption"></quill-editor> </template> <script> // 编辑器工具栏配置 c
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue使用富文本插件vue elemnt-tiptap和vue-quill-editor
webtext的博客
02-16 5171
这两天由于项目要实现新闻发布的功能，所以上github和gitee找了一些项目，发现都是用富文本插件编译成html来实现功能。经过尝试和寻找，我使用了vue elemnt-tiptap和vue-quill-editor，发现各有优缺点。还有一些坑，记录一下。 vue elemnt-tiptap 好处是鼠标滑过内容时，可以出现气泡方便使用，上传的图片可以设置大小，并且使用惯了element ui的话，感觉界面比较舒服。缺点是在使用首行缩进功能的时候，发现很费劲，怕凭客户的行为很难玩得转所以还是选择了vue-q
vue2 使用富文本插件 vue-tinymce(tinymce)
ws - 兮的博客空间
05-14 7028
富文本组件： vue-tinymce 配置教程 1、package.json 添加依赖及对应版本 dependencies 依赖管理下添加 "tinymce": "^5.3.1", "@packy-tang/vue-tinymce": "^1.0.0", 加好了 npm install 一下 2、vue-tinymce 组件进行二次封装 在 src/components/ 下创建 vue-tinymce/index.vue 组件 (对vue-tinymce进行二次封装) <template
vue2 tinymce富文本插件
小马甲
11-18 497
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。UEditorKindeditorSimditorCKEditorwangEditorSuneditorfroala等等。TinyMCELGPL2.1v5中文官网：TinyMCEax-z.cn官网及文档：www.tiny.cloud官网下载：www.tiny.cloud/get-tiny/self-hosted/Githubvuetinymce。
vue3 tinymce富文本插件
偷喝汽水的博客
07-27 4874
vue3 tinymce富文本
vue实现富文本
qq_44760955的博客
05-18 1万+
供自己学习笔记使用。
vue前端项目富文本应用
xiatianit的博客
01-15 3542
quill
Vue3封装Quill富文本组件：vue-quill-text-editor
洲上牧童
05-10 6580
用Vue3封装了Quill富文本编辑器，实现了内容保存和图片Url上传功能，欢迎使用~
vue3富文本编辑器vue-quill-editor预览
07-27
你可以使用vue-quill-editor的预览功能来实现富文本编辑器的预览效果。首先，确保你已经安装了vue-quill-editor。 ```bash npm install vue-quill-editor ``` 然后，在你的Vue组件中引入并注册vue-quill-editor。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值