vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）

基本使用

安装依赖

npm i quill

.vue文件

<div ref="editor" :style="finalStyle"></div>

    import Quill from "quill";import "quill/dist/quill.snow.css";

let Options = {theme: "snow",placeholder: "请在这里输入",modules: {toolbar: {container: [// [{ 'header': 1 }, { 'header': 2 }], // 标题 —— 独立平铺[{header: [1, 2, 3, 4, 5, 6, false]}], // 标题 —— 下拉选择[{size: ["small", false, "large", "huge"]}], // 字体大小[{list: "ordered"}, {list: "bullet"}], // 有序、无序列表["blockquote", "code-block"], // 引用  代码块// 链接按钮需选中文字后点击["link", "image", "video"], // 链接、图片、视频[{align: []}], // 对齐方式// text direction[{indent: "-1"}, {indent: "+1"}], // 缩进["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线[{color: []}, {background: []}], // 字体颜色、字体背景颜色[{'script': 'sub'}, {'script': 'super'}],      // 下标/上标[{'font': []}],//字体["clean"], // 清除文本格式]}}}new Quill(this.$refs.editor, Options)

代码高亮

需安装依赖

npm i highlight.js

    import hljs from 'highlight.js'import 'highlight.js/styles/monokai-sublime.css'

在Options的modules里添加如下的syntax

                    modules: {syntax: {highlight: text => {return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方}},

自定义字体

                // 自定义字体let fontList = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']Quill.import('formats/font').whitelist = fontList; //将字体加入到白名单

在Options的toolbar里传入fontList

 [{'font': fontList}],//字体

汉化

主要通过css实现

   .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[data-value=SimSun]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {content: "宋体";}.ql-font-SimSun {font-family: "SimSun";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {content: "黑体";}.ql-font-SimHei {font-family: "SimHei";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {content: "微软雅黑";}.ql-font-Microsoft-YaHei {font-family: "Microsoft YaHei";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {content: "楷体";}.ql-font-KaiTi {font-family: "KaiTi";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {content: "仿宋";}.ql-font-FangSong {font-family: "FangSong";}

鼠标悬浮提示

new Quill 后执行方法即可

                new Quill(this.$refs.editor, Options);this.addQuillTitle();

addQuillTitle() {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': '清除字体样式'}let oToolBar = document.querySelector('.ql-toolbar')if (!oToolBar) {return}let aButton = oToolBar.querySelectorAll('button')let 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]]})}

组件封装

pub-editor_quill.vue

<template><div ref="editor" :style="finalStyle"></div>
</template>
<script>import Quill from "quill";import "quill/dist/quill.snow.css";import hljs from 'highlight.js'import 'highlight.js/styles/monokai-sublime.css'export default {watch: {value(newVal) {if (newVal && newVal !== this.newValue) {// 父组件传入新值，且父组件传入的新值不为子组件当前的值（子组件的内容发生改变时传给父组件的值）时this.newValue = newValthis.quill.pasteHTML(newVal)} else if (!newVal) {this.quill.setText('')}},disabled(newVal) {this.quill.enable(!newVal)}},props: {hideTool: {type: Boolean,default: false},value: String,disabled: {type: Boolean,default: false},editorStyle: {type: Object,default: () => {return {minHeight: '100px'}}},disabledStyle: {type: Object,default: () => {// 与elementui表单禁用风格一致return {background: "#f5f7fa",color: "#c0c4cc",cursor: "not-allowed",borderRadius: "4px",border: "1px solid #dcdfe6"}}},options: {type: Object,required: false,default: () => ({})},},methods: {disEditor() {this.finalStyle = Object.assign({}, this.finalStyle, this.disabledStyle)},init() {if (JSON.stringify(this.editorStyle) !== "{}") {this.finalStyle = this.editorStyle}// 自定义字体let fontList = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']Quill.import('formats/font').whitelist = fontList; //将字体加入到白名单let defaultOptions = {theme: "snow",placeholder: "请在这里输入",modules: {syntax: {highlight: text => {return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方}},toolbar: {container: [// [{ 'header': 1 }, { 'header': 2 }], // 标题 —— 独立平铺[{header: [1, 2, 3, 4, 5, 6, false]}], // 标题 —— 下拉选择[{size: ["small", false, "large", "huge"]}], // 字体大小[{list: "ordered"}, {list: "bullet"}], // 有序、无序列表["blockquote", "code-block"], // 引用  代码块// 链接按钮需选中文字后点击["link", "image", "video"], // 链接、图片、视频[{align: []}], // 对齐方式// text direction[{indent: "-1"}, {indent: "+1"}], // 缩进["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线[{color: []}, {background: []}], // 字体颜色、字体背景颜色[{'script': 'sub'}, {'script': 'super'}],      // 下标/上标[{'font': fontList}],//字体["clean"], // 清除文本格式]}}}let finalOptions = Object.assign({}, defaultOptions, this.options)if (this.hideTool) {finalOptions.modules.toolbar = null}this.quill = new Quill(this.$refs.editor, finalOptions);this.addQuillTitle();if (this.value) {this.quill.pasteHTML(this.value)}// 调整光标到最后this.quill.setSelection(this.quill.getLength() + 1);this.quill.enable(!this.disabled)if (this.disabled) {this.disEditor()}this.quill.on('selection-change', range => {if (!range) {this.$emit('blur', this.quill)} else {this.$emit('focus', this.quill)}})this.quill.on('text-change', () => {let html = this.$refs.editor.children[0].innerHTMLif (html === '<p><br></p>') html = ''this.newValue = htmlthis.$emit('input', this.newValue)this.$emit('change', {html: this.newValue,text: this.quill.getText()})})},addQuillTitle() {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': '清除字体样式'}let oToolBar = document.querySelector('.ql-toolbar')if (!oToolBar) {return}let aButton = oToolBar.querySelectorAll('button')let 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() {this.init()},beforeDestroy() {this.quill = nulldelete this.quill},data() {return {quill: null,newValue: null,finalStyle: {}}},}
</script>
<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[data-value=SimSun]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {content: "宋体";}.ql-font-SimSun {font-family: "SimSun";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {content: "黑体";}.ql-font-SimHei {font-family: "SimHei";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {content: "微软雅黑";}.ql-font-Microsoft-YaHei {font-family: "Microsoft YaHei";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {content: "楷体";}.ql-font-KaiTi {font-family: "KaiTi";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {content: "仿宋";}.ql-font-FangSong {font-family: "FangSong";}
</style>

使用方法

        <pub-editor_quillv-model="content"@blur="onEditorBlur()"@focus="onEditorFocus()"@change="onEditorChange()"/>

        data() {return {content: '编辑器的初始值',}},

vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）相关推荐

Flask博客实战 - 集成富文本编辑器Quill
富文本编辑器Quill 为什么需要集成富文本编辑器? 一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和 ...
现代富文本编辑器Quill的内容渲染机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
ueditor富文本编辑器过滤了代码，如何取消？
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得. 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单.易 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...

vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）

基本使用

代码高亮

自定义字体

汉化

鼠标悬浮提示

组件封装

使用方法

vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）相关推荐

最新文章

热门文章