注：上傳圖片需要結合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(); } }