注:上传图片需要结合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();
}
}