注：上传图片需要结合element-ui的upload上传
首先第一步：安装vue-quill-editor或quill两个模块
yarn add vue-quill-editor -D yarn add quill -D
然后再main.js文件中引入
1 import QuillEditor from 'vue-quill-editor'
2 import 'quill/dist/quill.core.css'
3 import 'quill/dist/quill.bubble.css'
4 import 'quill/dist/quill.snow.css'
5 Vue.use(QuillEditor)
使用方法如下：
<template>
<div>
<el-upload
class="avatar-uploader"
action="要上传到的接口"
:data='date' //需要传递的参数
name="file"
:show-file-list="false"
:on-success="Success"
:on-error="Error">
</el-upload>
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
></quill-editor>
<button @click="saveHtml">确定</button>
</div>
</template>
<script> export default { data () { return { content: ``,//最终拿到的内容
editorOption: { theme: 'snow', //默认配置项
// 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'], //清除字体样式
// ['image','video']//上传图片、上传视频
// ]
// }
// 上传图片时modules中内容如下
modules: { toolbar: { container: [ //配置项，全部配置如上
['bold', 'italic', 'underline'], [{ 'align': [] }], ['image'] ], handlers: { 'image': function (value) { if (value) { document.querySelector('.avatar-uploader input').click() } else { this.quill.format('image', false); } } } } } }, } }, computed: { editor () { return this.$refs.myQuillEditor.quill } }, methods: { Success(res, file){ // 获取实例
let quill = this.$refs.myQuillEditor.quill // 上传成功
if (res.errorCode == 200 && res.result !== null) { //res.errorCode是上传是否成功的状态值~~res.result是上传成功返回的图片路径
// 获取官标位置
let cursor = quill.getSelection().index; console.log(res) //我这里loot.SERVE.file是服务器前半截地址加上res.result返回的半截地址
quill.insertEmbed(cursor, 'image', loot.SERVE.file+res.result) // 光标向后加1
quill.setSelection(cursor + 1) } else { this.$message.error('上传失败') } }, Error(){ this.$message.error('上传失败') }, onEditorReady (editor) {}, // 准备编辑器
onEditorBlur () {}, // 失去焦点事件
onEditorFocus () {}, // 获得焦点事件
onEditorChange () {}, // 内容改变事件
saveHtml (event) { alert(this.content) } } } </script>
给quill-editor组件中的工具栏添加title
原文链接：https://blog.csdn.net/w390058785/article/details/84346251
第一步：创建一个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]]; }); }
使用
<script> import { addQuillTitle } from './quill-title.js' export default { mounted(){ addQuillTitle(); } }