本文共 1567 字，大约阅读时间需要 5 分钟。

最近项目中接触到了富文本编辑器，最终选择了vue-quill-editor。

npm install vue-quill-editor --save

第二步：在main.js中引用

// 使用quill富文本编辑器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);

第三步：创建一个新的js文件，取名为 quill-title.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]]      })}

第四步：创建一个新的vue文件，取名为 quillEditor.vue

第五步：在别的页面引入就可以了

转载地址：https://blog.csdn.net/qq_43827328/article/details/89956112 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！