用自定义指令给vue-quill-editor添加一个全屏的功能
1.自定义指令可分为全局定义和局部定义
1.1全局自定义指令以及引入方式
1 Vue.directive("maxWindow",{ 2 bind(el,binding) { 3 let maxId = binding.value + "maxId"; 4 let minId = binding.value + "minId"; 5 const domList = [ 6 { 7 dom: `<svg t="1637824425355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10463"><path d="M243.2 780.8v-179.2H153.6v179.2c0 49.28 40.32 89.6 89.6 89.6h179.2v-89.6H243.2zM780.8 153.6h-179.2v89.6h179.2v179.2h89.6V243.2c0-49.28-40.32-89.6-89.6-89.6zM243.2 243.2h179.2V153.6H243.2c-49.28 0-89.6 40.32-89.6 89.6v179.2h89.6V243.2z m537.6 537.6h-179.2v89.6h179.2c49.28 0 89.6-40.32 89.6-89.6v-179.2h-89.6v179.2z" p-id="10464" fill="#000000"></path></svg>`, 8 tit: "最大化", 9 id: maxId, 10 display: "block", 11 }, 12 { 13 dom: `<svg t="1637824296192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6336"><path d="M341.065143 910.189714v-146.285714c0-53.686857-43.885714-97.572571-97.572572-97.572571h-146.285714a48.786286 48.786286 0 0 0 0 97.499428h146.285714v146.285714a48.786286 48.786286 0 1 0 97.499429 0z m-292.571429-617.910857c0 26.916571 21.796571 48.786286 48.713143 48.786286h146.285714c53.686857 0 97.572571-43.885714 97.572572-97.572572v-146.285714a48.786286 48.786286 0 0 0-97.499429 0v146.285714h-146.285714a48.786286 48.786286 0 0 0-48.786286 48.786286z m910.409143 0a48.786286 48.786286 0 0 0-48.713143-48.786286h-146.285714v-146.285714a48.786286 48.786286 0 1 0-97.499429 0v146.285714c0 53.686857 43.885714 97.572571 97.499429 97.572572h146.285714a48.786286 48.786286 0 0 0 48.713143-48.786286z m0 422.765714a48.786286 48.786286 0 0 0-48.713143-48.713142h-146.285714c-53.686857 0-97.572571 43.885714-97.572571 97.572571v146.285714a48.786286 48.786286 0 1 0 97.499428 0v-146.285714h146.285714a48.786286 48.786286 0 0 0 48.786286-48.786286z" fill="#000000" p-id="6337"></path></svg>`, 14 tit: "还原", 15 id: minId, 16 display: "none", 17 }, 18 ]; 19 setTimeout(() => { 20 let dialogHeaderEl = el.querySelector(".ql-toolbar"); 21 domList.map((item) => { 22 let dom = document.createElement("span"); 23 dom.className = "ql-formats"; 24 dom.innerHTML = `<button title="${item.tit}" style="display:${item.display}" id="${item.id}" type="button" class="ql-clean">${item.dom}</button>`; 25 dialogHeaderEl.appendChild(dom); 26 }); 27 28 //最大化 29 document.getElementById(maxId).onclick = () => { 30 el.style.width = 100 + "vw"; 31 el.style.height = 100 + "vh"; 32 el.style.position = "fixed"; 33 el.style.top = 0; 34 el.style.left = 0; 35 el.style.zIndex = 9999; 36 el.style.background = "white"; 37 document.getElementById(maxId).style.display = "none"; 38 document.getElementById(minId).style.display = "block"; 39 }; 40 //最小化 41 document.getElementById(minId).onclick = () => { 42 el.style.width = "auto"; 43 el.style.height = "auto"; 44 el.style.position = "inherit"; 45 document.getElementById(maxId).style.display = "block"; 46 document.getElementById(minId).style.display = "none"; 47 }; 48 }, 0); 49 } 50 })
全局自定义指令引入方式：
新建utils文件夹，新建 directive.js
1 import Vue from 'vue' 2 Vue.directive("color",{ 3 bind(el,binding) { 4 ... 5 } 6 })
在main.js中引入
1 import Vue from 'vue' 2 import App from './App.vue' 3 import router from './router' 4 import store from './store' 5 6 Vue.config.productionTip = false 7 8 // 引入自定义指令 9 import './utils/directive' 10 11 new Vue({ 12 router, 13 store, 14 render: h => h(App) 15 }).$mount('#app')
1.2局部自定义指令
1 directives: { 2 maxWindow: { 3 inserted(el, binding) { 4 let maxId = binding.value + "maxId"; 5 let minId = binding.value + "minId"; 6 const domList = [ 7 { 8 dom: `<svg t="1637824425355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10463"><path d="M243.2 780.8v-179.2H153.6v179.2c0 49.28 40.32 89.6 89.6 89.6h179.2v-89.6H243.2zM780.8 153.6h-179.2v89.6h179.2v179.2h89.6V243.2c0-49.28-40.32-89.6-89.6-89.6zM243.2 243.2h179.2V153.6H243.2c-49.28 0-89.6 40.32-89.6 89.6v179.2h89.6V243.2z m537.6 537.6h-179.2v89.6h179.2c49.28 0 89.6-40.32 89.6-89.6v-179.2h-89.6v179.2z" p-id="10464" fill="#000000"></path></svg>`, 9 tit: "最大化", 10 id: maxId, 11 display: "block", 12 }, 13 { 14 dom: `<svg t="1637824296192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6336"><path d="M341.065143 910.189714v-146.285714c0-53.686857-43.885714-97.572571-97.572572-97.572571h-146.285714a48.786286 48.786286 0 0 0 0 97.499428h146.285714v146.285714a48.786286 48.786286 0 1 0 97.499429 0z m-292.571429-617.910857c0 26.916571 21.796571 48.786286 48.713143 48.786286h146.285714c53.686857 0 97.572571-43.885714 97.572572-97.572572v-146.285714a48.786286 48.786286 0 0 0-97.499429 0v146.285714h-146.285714a48.786286 48.786286 0 0 0-48.786286 48.786286z m910.409143 0a48.786286 48.786286 0 0 0-48.713143-48.786286h-146.285714v-146.285714a48.786286 48.786286 0 1 0-97.499429 0v146.285714c0 53.686857 43.885714 97.572571 97.499429 97.572572h146.285714a48.786286 48.786286 0 0 0 48.713143-48.786286z m0 422.765714a48.786286 48.786286 0 0 0-48.713143-48.713142h-146.285714c-53.686857 0-97.572571 43.885714-97.572571 97.572571v146.285714a48.786286 48.786286 0 1 0 97.499428 0v-146.285714h146.285714a48.786286 48.786286 0 0 0 48.786286-48.786286z" fill="#000000" p-id="6337"></path></svg>`, 15 tit: "还原", 16 id: minId, 17 display: "none", 18 }, 19 ]; 20 setTimeout(() => { 21 let dialogHeaderEl = el.querySelector(".ql-toolbar"); 22 domList.map((item) => { 23 let dom = document.createElement("span"); 24 dom.className = "ql-formats"; 25 dom.innerHTML = `<button title="${item.tit}" style="display:${item.display}" id="${item.id}" type="button" class="ql-clean">${item.dom}</button>`; 26 dialogHeaderEl.appendChild(dom); 27 }); 28 29 //最大化 30 document.getElementById(maxId).onclick = () => { 31 el.style.width = 100 + "vw"; 32 el.style.height = 100 + "vh"; 33 el.style.position = "fixed"; 34 el.style.top = 0; 35 el.style.left = 0; 36 el.style.zIndex = 9999; 37 el.style.background = "white"; 38 document.getElementById(maxId).style.display = "none"; 39 document.getElementById(minId).style.display = "block"; 40 }; 41 //最小化 42 document.getElementById(minId).onclick = () => { 43 el.style.width = "auto"; 44 el.style.height = "auto"; 45 el.style.position = "inherit"; 46 document.getElementById(maxId).style.display = "block"; 47 document.getElementById(minId).style.display = "none"; 48 }; 49 }, 0); 50 } 51 } 52 }
在单组件中注册自定义指令
components: {
quillEditor,
},
在组件中使用自定义指令
<quill-editor :ref="refName" v-maxWindow="refName" v-model="content" :options="editorOption" @change="onEditorChange($event)" />
优化：编辑器工具栏缺少title提示，可以用quillTitle.js自行优化
1 const titleConfig = { 2 'ql-bold': '加粗', 3 'ql-color': '颜色', 4 'ql-font': '字体', 5 'ql-code': '插入代码', 6 'ql-italic': '斜体', 7 'ql-link': '添加链接', 8 'ql-color': '字体颜色', 9 'ql-background': '背景颜色', 10 'ql-size': '字体大小', 11 'ql-strike': '删除线', 12 'ql-script': '上标/下标', 13 'ql-underline': '下划线', 14 'ql-blockquote': '引用', 15 'ql-header': '标题', 16 'ql-indent': '缩进', 17 'ql-list': '列表', 18 'ql-align': '文本对齐', 19 'ql-direction': '文本方向', 20 'ql-code-block': '代码块', 21 'ql-formula': '公式', 22 'ql-image': '图片', 23 'ql-video': '视频', 24 'ql-clean': '清除字体样式' 25 }; 26 27 export function addQuillTitle() { 28 const oToolBar = document.querySelector('.ql-toolbar'), 29 aButton = oToolBar.querySelectorAll('button'), 30 aSelect = oToolBar.querySelectorAll('select'), 31 aSpan = oToolBar.querySelectorAll('span'); 32 aButton.forEach(function (item) { 33 if (item.className === 'ql-script') { 34 item.value === 'sub' ? item.title = '下标' : item.title = '上标'; 35 } else if (item.className === 'ql-indent') { 36 item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'; 37 } else if (item.className === 'ql-list') { 38 item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表' 39 } else { 40 item.title = titleConfig[item.classList[0]]; 41 } 42 }); 43 aSelect.forEach(function (item) { 44 item.parentNode.title = titleConfig[item.classList[0]]; 45 }); 46 aSpan.forEach((item) => { 47 if (item.classList[0] === 'ql-color') { 48 item.title = titleConfig[item.classList[0]]; 49 } else if (item.classList[0] === 'ql-background') { 50 item.title = titleConfig[item.classList[0]]; 51 } 52 }); 53 }
说明：一个页面有多个富文本
1.需要给自定义指令动态传参（如：v-maxWindow="refName"）
2.需要给组件绑定动态的ref（如：:ref="refName"）
父组件：
子组件：
