首页 > 其他分享 >Quill富文本编辑器(下)

Quill富文本编辑器(下)

时间：2023-06-08 11:44:26浏览次数：43  
标签：el 文本编辑 dom style item document ql Quill

用自定义指令给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"）

父组件：

 子组件：

 

标签：el,文本编辑,dom,style,item,document,ql,Quill
From： https://www.cnblogs.com/xchlsl/p/17465630.html

相关文章

  • 云原生之使用Docker部署Dillinger个人文本编辑器
    (云原生之使用Docker部署Dillinger个人文本编辑器)一、Dillinger介绍Dillinger是一个基于云、可移动的离线存储、基于AngularJS的H5Markdown编辑器。二、检查本地docker状态[root@node~]#systemctlstatusdocker●docker.service-DockerApplicationContainerEng......
  • linux安装图形化文本编辑gedit
    服务器基于CentOSsu切换root用户，或者使用sudo命令sudoyum-yinstallgedit 安装完成  常用命令类似Windows：CTRL-Z:撤销CTRL-C:复制CTRL-V:粘贴CTRL-T:缩进CTRL-Q:退出CTRL-S:保存CTRL—R:替换CTRL+Tab切换CTRL+W关闭选项卡 ......
  • 网安--Linux文本编辑
    1、vi与vim的区别vim是vi的进阶版，vim兼容vi2、vim配置文件/etc/vimrc3、vim的三种模式区别命令模式vim文件名移动光标文件跳到行首               HOME跳到行尾                  END向后前进几行              ......
  • linux常用指令(文本编辑)
    (1).vim 安装vimyuminstallvim命令命令模式--vim文件名字或者编辑模式按esc进入i--在光标的前面插入字符a--在光标的后面添加入字符o--在光标下一行插入字符编辑模式--命令行模式按i进入yy--复制当前行p--粘贴dd--删除当前行......
  • 支持复制粘贴word公式的文本编辑器
    ​ 图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例：打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。加入下面的代码：//判断剪......
  • 文本编辑器
    vim编辑器检查vim软件包[root@Wesuiliye~]#whichvim/usr/bin/vim[root@Wesuiliye~]#[root@Wesuiliye~]#ll/usr/bin/vim-rwxr-xr-x1rootroot2337208Dec162020/usr/bin/vim[root@Wesuiliye~]#如果有多个连续的链接文件，其实犯不着多次使用ls-l命令来查......
  • 界面控件DevExpress Blazor UI v22.2 - 报表、富文本编辑器组件增强
    DevExpress拥有.NET开发需要的所有平台控件，包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助工具，该组件拥有众多新产品和数十个具有高影响力的功能，可为桌面、Web和移动应用提供直观的解决方案，全面解决各种使用场......
  • 能粘贴Word 内容(含公式)的文本编辑器
    ​ 自动导入Word图片，或者粘贴Word内容时自动上传所有的图片，并且最终保留Word样式，这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器（富文本编辑器）中时，编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • 富文本编辑器的下载和使用
    目录富文本编辑器：下载用法编辑器使用方法1.下载编辑器2.部署编辑器3.修改HTML页面4.获取HTML数据参数使用富文本编辑器：kindeditor的使用为例http://kindeditor.net/demo.php下载用法只有这俩有用其他使用方法看文档说明编辑器使用方法1.下载编辑器下载KindEdi......
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程 （最全）
    VUE-QUILL-EDITOR基于QUILL、适用于VUE的富文本编辑器，支持服务端渲染和单页应用，非常高效简洁。一.基础用法1、NPM导入VUE-QUILL-EDITORnpminstallvue-quill-editor--save2、引入VUE-QUILL-EDITOR在全局中引入importVuefrom'vue'importVueQuillEditorfrom'v......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99