devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue-quill-editor (好用的富文本编辑器，带表格编辑)_vue-quill-editor表格

作者：我家自动化 | 2024-07-27 09:27:49

赞

踩

vue-quill-editor表格

安装依赖

npm i vue-quill-editor@"^3.0.6"    //3版本以上

组件QuillEditor.vue文件：
 

  1. <template>
  2.   <keep-alive>
  3.     <div class="vue-quill-editor">
  4.       <div class="editor"></div>
  5.     </div>
  6.   </keep-alive>
  7. </template>
  8.  
  9. <script>
  10. import Quill from "quill";
  11. import "quill/dist/quill.snow.css";
  12. // 设置字体大小
  13. const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
  14. fontSizeStyle.whitelist = [
  15.   "12px",
  16.   "14px",
  17.   "16px",
  18.   "18px",
  19.   "20px",
  20.   "24px",
  21.   "28px",
  22.   "32px",
  23.   "36px",
  24. ];
  25. Quill.register(fontSizeStyle, true);
  26. // 设置字体样式
  27. const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
  28. const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"];
  29. Font.whitelist = fonts; // 将字体加入到白名单
  30. Quill.register(Font, true);
  31. const titleConfig = {
  32.   "ql-bold": "加粗",
  33.   "ql-color": "颜色",
  34.   "ql-font": "字体",
  35.   "ql-code": "插入代码",
  36.   "ql-italic": "斜体",
  37.   "ql-link": "添加链接",
  38.   "ql-background": "颜色",
  39.   "ql-size": "字体大小",
  40.   "ql-strike": "删除线",
  41.   "ql-script": "上标/下标",
  42.   "ql-underline": "下划线",
  43.   "ql-blockquote": "引用",
  44.   "ql-header": "标题",
  45.   "ql-indent": "缩进",
  46.   "ql-list": "列表",
  47.   "ql-align": "文本对齐",
  48.   "ql-direction": "文本方向",
  49.   "ql-code-block": "代码块",
  50.   "ql-formula": "公式",
  51.   "ql-image": "图片",
  52.   "ql-video": "视频",
  53.   "ql-clean": "清除字体样式",
  54.   "ql-upload": "文件",
  55.   "ql-table": "插入表格",
  56.   "ql-table-insert-row": "插入行",
  57.   "ql-table-insert-column": "插入列",
  58.   "ql-table-delete-row": "删除行",
  59.   "ql-table-delete-column": "删除列",
  60. };
  61. export default {
  62.   name: "Editor",
  63.   props: {
  64.     value: Object,
  65.   },
  66.   data() {
  67.     return {
  68.       quill: null,
  69.       options: {
  70.         theme: "snow",
  71.         modules: {
  72.           toolbar: {
  73.             container: [
  74.               ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  75.               [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  76.               [{ align: [] }], // 对齐方式-----[{ align: [] }]
  77.               [
  78.                 {
  79.                   size: fontSizeStyle.whitelist,
  80.                 },
  81.               ], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  82.               [{ font: fonts }], // 字体种类-----[{ font: [] }]
  83.               [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  84.               [{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}]
  85.               [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  86.               [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  87.               [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  88.               [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  89.               ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  90.               ["clean"], // 清除文本格式-----['clean']
  91.               // ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
  92.               [
  93.                 { table: "TD" },
  94.                 { "table-insert-row": "TIR" },
  95.                 { "table-insert-column": "TIC" },
  96.                 { "table-delete-row": "TDR" },
  97.                 { "table-delete-column": "TDC" },
  98.               ],
  99.             ],
  100.             handlers: {
  101.               table: function (val) {
  102.                 this.quill.getModule("table").insertTable(2, 3);
  103.               },
  104.               "table-insert-row": function () {
  105.                 this.quill.getModule("table").insertRowBelow();
  106.               },
  107.               "table-insert-column": function () {
  108.                 this.quill.getModule("table").insertColumnRight();
  109.               },
  110.               "table-delete-row": function () {
  111.                 this.quill.getModule("table").deleteRow();
  112.               },
  113.               "table-delete-column": function () {
  114.                 this.quill.getModule("table").deleteColumn();
  115.               },
  116.             },
  117.           },
  118.           table: true,
  119.         },
  120.         placeholder: "",
  121.       },
  122.     };
  123.   },
  124.   methods: {
  125.     addQuillTitle() {
  126.       const oToolBar = document.querySelector(".ql-toolbar");
  127.       const aButton = oToolBar.querySelectorAll("button");
  128.       const aSelect = oToolBar.querySelectorAll("select");
  129.       aButton.forEach(function (item) {
  130.         if (item.className === "ql-script") {
  131.           item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
  132.         } else if (item.className === "ql-indent") {
  133.           item.value === "+1"
  134.             ? (item.title = "向右缩进")
  135.             : (item.title = "向左缩进");
  136.         } else {
  137.           item.title = titleConfig[item.classList[0]];
  138.         }
  139.       });
  140.       aSelect.forEach(function (item) {
  141.         item.parentNode.title = titleConfig[item.classList[0]];
  142.       });
  143.     },
  144.     getContentData() {
  145.       return this.quill.getContents();
  146.     },
  147.   },
  148.   mounted() {
  149.     const dom = this.$el.querySelector(".editor");
  150.     this.quill = new Quill(dom, this.options);
  151.     // this.quill.setContents(this.value)
  152.     this.quill.on("text-change", () => {
  153.       //   console.log(this.quill.getContents())
  154.       //   this.$emit('contentData', this.quill.getContents())
  155.       //   console.log(this.quill.root.innerHTML)
  156.       this.$emit("contentData", this.quill.root.innerHTML);
  157.     });
  158.     this.$el.querySelector(
  159.       ".ql-table-insert-row"
  160.     ).innerHTML = `<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="200"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>`;
  161.     this.$el.querySelector(
  162.       ".ql-table-insert-column"
  163.     ).innerHTML = `<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="200"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>`;
  164.     this.$el.querySelector(
  165.       ".ql-table-delete-row"
  166.     ).innerHTML = `<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="200"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`;
  167.     this.$el.querySelector(
  168.       ".ql-table-delete-column"
  169.     ).innerHTML = `<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="200"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>`;
  170.     this.addQuillTitle();
  171.   },
  172.   activated() {
  173.     this.quill.setContents({});
  174.   },
  175. };
  176. </script>
  177. <style lang="scss">
  178. .vue-quill-editor {
  179.   line-height: normal;
  180.   .ql-container.ql-snow {
  181.     line-height: normal !important;
  182.     height: 460px !important;
  183.     font-size: 14px;
  184.   }
  185.   .ql-snow {
  186.     .ql-tooltip[data-mode="link"]::before {
  187.       content: "请输入链接地址:";
  188.     }
  189.     .ql-tooltip.ql-editing a.ql-action::after {
  190.       border-right: 0px;
  191.       content: "保存";
  192.       padding-right: 0px;
  193.     }
  194.     .ql-tooltip[data-mode="video"]::before {
  195.       content: "请输入视频地址:";
  196.     }
  197.     .ql-picker.ql-size {
  198.       .ql-picker-label[data-value="12px"]::before,
  199.       .ql-picker-item[data-value="12px"]::before {
  200.         content: "12px";
  201.       }
  202.       .ql-picker-label[data-value="14px"]::before,
  203.       .ql-picker-item[data-value="14px"]::before {
  204.         content: "14px";
  205.       }
  206.       .ql-picker-label[data-value="16px"]::before,
  207.       .ql-picker-item[data-value="16px"]::before {
  208.         content: "16px";
  209.       }
  210.       .ql-picker-label[data-value="18px"]::before,
  211.       .ql-picker-item[data-value="18px"]::before {
  212.         content: "18px";
  213.       }
  214.       .ql-picker-label[data-value="20px"]::before,
  215.       .ql-picker-item[data-value="20px"]::before {
  216.         content: "20px";
  217.       }
  218.       .ql-picker-label[data-value="24px"]::before,
  219.       .ql-picker-item[data-value="24px"]::before {
  220.         content: "24px";
  221.       }
  222.       .ql-picker-label[data-value="28px"]::before,
  223.       .ql-picker-item[data-value="28px"]::before {
  224.         content: "28px";
  225.       }
  226.       .ql-picker-label[data-value="32px"]::before,
  227.       .ql-picker-item[data-value="32px"]::before {
  228.         content: "32px";
  229.       }
  230.       .ql-picker-label[data-value="36px"]::before,
  231.       .ql-picker-item[data-value="36px"]::before {
  232.         content: "36px";
  233.       }
  234.     }
  235.     .ql-picker.ql-header {
  236.       .ql-picker-label::before,
  237.       .ql-picker-item::before {
  238.         content: "文本";
  239.       }
  240.       .ql-picker-label[data-value="1"]::before,
  241.       .ql-picker-item[data-value="1"]::before {
  242.         content: "标题1";
  243.       }
  244.       .ql-picker-label[data-value="2"]::before,
  245.       .ql-picker-item[data-value="2"]::before {
  246.         content: "标题2";
  247.       }
  248.       .ql-picker-label[data-value="3"]::before,
  249.       .ql-picker-item[data-value="3"]::before {
  250.         content: "标题3";
  251.       }
  252.       .ql-picker-label[data-value="4"]::before,
  253.       .ql-picker-item[data-value="4"]::before {
  254.         content: "标题4";
  255.       }
  256.       .ql-picker-label[data-value="5"]::before,
  257.       .ql-picker-item[data-value="5"]::before {
  258.         content: "标题5";
  259.       }
  260.       .ql-picker-label[data-value="6"]::before,
  261.       .ql-picker-item[data-value="6"]::before {
  262.         content: "标题6";
  263.       }
  264.     }
  265.     .ql-picker.ql-font {
  266.       .ql-picker-label[data-value="SimSun"]::before,
  267.       .ql-picker-item[data-value="SimSun"]::before {
  268.         content: "宋体";
  269.         font-family: "SimSun" !important;
  270.       }
  271.       .ql-picker-label[data-value="SimHei"]::before,
  272.       .ql-picker-item[data-value="SimHei"]::before {
  273.         content: "黑体";
  274.         font-family: "SimHei";
  275.       }
  276.       .ql-picker-label[data-value="Microsoft-YaHei"]::before,
  277.       .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  278.         content: "微软雅黑";
  279.         font-family: "Microsoft YaHei";
  280.       }
  281.       .ql-picker-label[data-value="KaiTi"]::before,
  282.       .ql-picker-item[data-value="KaiTi"]::before {
  283.         content: "楷体";
  284.         font-family: "KaiTi" !important;
  285.       }
  286.       .ql-picker-label[data-value="FangSong"]::before,
  287.       .ql-picker-item[data-value="FangSong"]::before {
  288.         content: "仿宋";
  289.         font-family: "FangSong";
  290.       }
  291.     }
  292.   }
  293.   .ql-align-center {
  294.     text-align: center;
  295.   }
  296.   .ql-align-right {
  297.     text-align: right;
  298.   }
  299.   .ql-align-left {
  300.     text-align: left;
  301.   }
  302. }
  303. </style>

父组件使用：

  1. // 编辑状态 
  2. <QuillEditor v-if="isEdit" ref="QuillEditor" />
  3. // 展示状态（为保证格式正确，要命名为"ql-editor",外面盒子要命名为"ql-container ql-snow"）
  4.  <div v-else class="ql-container ql-snow">
  5.            <div
  6.               class="ql-editor"
  7.               style="height: 500px; padding: 20px 20px; width: 100%"
  8.               v-html="content"
  9.             />
  10.  </div>

main.js:
 

  1. import VueQuillEditor from 'vue-quill-editor' // 富文本编辑器
  2. import 'quill/dist/quill.core.css'
  3. import 'quill/dist/quill.snow.css'
  4. import 'quill/dist/quill.bubble.css'
  5.  
  6. Vue.use(VueQuillEditor)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/889581
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号