• 在vue2项目中使用vue-quill-editor实现富文本编译器

    1 安装

    npm install vue-quill-editor --save

     2 引入

    有两种引入方式

    （1）全局引入(main)

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

    （2）局部引入

    1. import { quillEditor } from 'vue-quill-editor'
    2.  
    3. export default {
    4.   components: {
    5.     quillEditor
    6.   }
    7. }

    3 在组件内使用

    1. <template>
    2.   <div>
    3.     <div style="width: 80%; margin: 0 auto">
    4.       <quill-editor
    5.         v-model="content"
    6.         ref="myQuillEditor"
    7.         :options="editorOption"
    8.         @blur="onEditorBlur($event)"
    9.         @focus="onEditorFocus($event)"
    10.         @change="onEditorChange($event)"
    11.         @ready="onEditorReady($event)"
    12.       >
    13.       </quill-editor>
    14.     </div>
    15.   </div>
    16. </template>
    17.  
    18. <script>
    19. import { quillEditor } from "vue-quill-editor";
    20. export default {
    21.   name: "HomeView",
    22.   components: { quillEditor },
    23.   data() {
    24.     return {
    25.       content: "",
    26.       TiLength:0,
    27.       // 富文本编辑器配置
    28.       editorOption: {},
    29.     };
    30.   },
    31.  
    32.   methods: {
    33.     onSubmit() {
    34.       console.log("submit!");
    35.     },
    36.     // 失去焦点事件
    37.     onEditorBlur(quill) {
    38.       console.log("editor blur!", quill);
    39.     },
    40.     // 获得焦点事件
    41.     onEditorFocus(quill) {
    42.       console.log("editor focus!", quill);
    43.     },
    44.     // 准备富文本编辑器
    45.     onEditorReady(quill) {
    46.       console.log("editor ready!", quill);
    47.     },
    48.     // 内容改变事件
    49.     onEditorChange({ quill, html, text }) {
    50.       console.log("editor change!", quill, html, text);
    51.       this.content = html;
    52.     },
    53.   },
    54. };
    55. </script>
    56. <style>
    57.  
    58. </style>

     4 自定义编辑器配置项（可以根据自己所需要的显示工具表）

     data中返回

    1.  // 富文本编辑器配置
    2.       editorOption: {
    3.         theme: "snow", // or 'bubble'
    4.         modules: {
    5.           toolbar: [
    6.             ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    7.             ["blockquote", "code-block"], // 引用  代码块
    8.             [{ header: 1 }, { header: 2 }], // 1、2 级标题
    9.             [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    10.             [{ script: "sub" }, { script: "super" }], // 上标/下标
    11.             [{ indent: "-1" }, { indent: "+1" }], // 缩进
    12.             [{ direction: "rtl" }], // 文本方向
    13.             [
    14.               {
    15.                 size: [
    16.                   "12",
    17.                   "14",
    18.                   "16",
    19.                   "18",
    20.                   "20",
    21.                   "22",
    22.                   "24",
    23.                   "28",
    24.                   "32",
    25.                   "36",
    26.                 ],
    27.               },
    28.             ], // 字体大小
    29.             [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
    30.             [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    31.             // [{ font: ['songti'] }], // 字体种类
    32.             [{ align: [] }], // 对齐方式
    33.             ["clean"], // 清除文本格式
    34.             ["image", "video"], // 链接、图片、视频
    35.           ],
    36.         },
    37.         placeholder: "请输入正文",
    38.       },

    （1）对于字体详细的配置 

    1. <template>
    2.   <div class="vue-quill-editor">
    3.     <quill-editor ref="mwQuillEditor" v-model="html" :options="editorOption" />
    4.   div>
    5. template>
    6. <script>
    7. import { quillEditor, Quill } from "vue-quill-editor";
    8. import "quill/dist/quill.core.css";
    9. import "quill/dist/quill.snow.css";
    10. import "quill/dist/quill.bubble.css";
    11. // 设置字体大小
    12. const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
    13. fontSizeStyle.whitelist = [
    14.   "12px",
    15.   "14px",
    16.   "16px",
    17.   "18px",
    18.   "20px",
    19.   "24px",
    20.   "28px",
    21.   "32px",
    22.   "36px"
    23. ];
    24. Quill.register(fontSizeStyle, true);
    25. // 设置字体样式
    26. const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
    27. const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"];
    28. Font.whitelist = fonts; // 将字体加入到白名单
    29. Quill.register(Font, true);
    30. export default {
    31.   name: "VueQuillEditor",
    32.   components: {
    33.     quillEditor,
    34.   },
    35.   data() {
    36.     return {
    37.       html: this.value,
    38.       editorOption: {
    39.         modules: {
    40.           toolbar: [
    41.             [
    42.               {
    43.                 size: [
    44.                   "12px",
    45.                   "14px",
    46.                   "16px",
    47.                   "18px",
    48.                   "20px",
    49.                   "24px",
    50.                   "28px",
    51.                   "32px",
    52.                   "36px",
    53.                 ],
    54.               },
    55.             ],
    56.             [
    57.               {
    58.                 font: [
    59.                   "SimSun",
    60.                   "SimHei",
    61.                   "Microsoft-YaHei",
    62.                   "KaiTi",
    63.                   "FangSong",
    64.                 ],
    65.                 
    66.               },
    67.             ], 
    68.             [{ header: [1, 2, 3, 4, 5, 6, false] }] // 标题
    69.           ],
    70.         },
    71.       },
    72.       isShow: false,
    73.     };
    74.   },
    75. };
    76. script>
    77. <style lang="less">
    78. .vue-quill-editor {
    79.   .quill-editor {
    80.     line-height: normal;
    81.  
    82.     .ql-container.ql-snow {
    83.       line-height: normal !important;
    84.       height: 450px !important;
    85.       font-size: 14px;
    86.     }
    87.  
    88.  
    89.     .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
    90.     .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    91.       content: "12px";
    92.     }
    93.  
    94.     .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
    95.     .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    96.       content: "14px";
    97.     }
    98.  
    99.     .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
    100.     .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    101.       content: "16px";
    102.     }
    103.  
    104.     .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
    105.     .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    106.       content: "18px";
    107.     }
    108.  
    109.     .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
    110.     .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    111.       content: "20px";
    112.     }
    113.  
    114.     .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
    115.     .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    116.       content: "24px";
    117.     }
    118.  
    119.     .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
    120.     .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    121.       content: "28px";
    122.     }
    123.  
    124.     .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
    125.     .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    126.       content: "32px";
    127.     }
    128.  
    129.     .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
    130.     .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
    131.       content: "36px";
    132.     }
    133.  
    134.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
    135.     .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    136.       content: "微软雅黑";
    137.     }
    138.  
    139.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
    140.     .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    141.       content: "宋体";
    142.     }
    143.  
    144.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
    145.     .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    146.       content: "黑体";
    147.     }
    148.  
    149.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
    150.     .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    151.       content: "楷体";
    152.     }
    153.  
    154.     .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
    155.     .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    156.       content: "仿宋";
    157.     }
    158.  
    159.     .ql-picker.ql-header {
    160.  
    161.       .ql-picker-label::before,
    162.       .ql-picker-item::before {
    163.         content: "文本";
    164.       }
    165.  
    166.       .ql-picker-label[data-value="1"]::before,
    167.       .ql-picker-item[data-value="1"]::before {
    168.         content: "标题1";
    169.         font-size: 14px;
    170.       }
    171.  
    172.       .ql-picker-label[data-value="2"]::before,
    173.       .ql-picker-item[data-value="2"]::before {
    174.         content: "标题2";
    175.         font-size: 14px;
    176.       }
    177.  
    178.       .ql-picker-label[data-value="3"]::before,
    179.       .ql-picker-item[data-value="3"]::before {
    180.         content: "标题3";
    181.         font-size: 14px;
    182.       }
    183.  
    184.       .ql-picker-label[data-value="4"]::before,
    185.       .ql-picker-item[data-value="4"]::before {
    186.         content: "标题4";
    187.         font-size: 14px;
    188.       }
    189.  
    190.       .ql-picker-label[data-value="5"]::before,
    191.       .ql-picker-item[data-value="5"]::before {
    192.         content: "标题5";
    193.         font-size: 14px;
    194.       }
    195.  
    196.       .ql-picker-label[data-value="6"]::before,
    197.       .ql-picker-item[data-value="6"]::before {
    198.         content: "标题6";
    199.         font-size: 14px;
    200.       }
    201.     }
    202.  
    203.     .ql-align-center {
    204.       text-align: center;
    205.     }
    206.  
    207.     .ql-align-right {
    208.       text-align: right;
    209.     }
    210.  
    211.     .ql-align-left {
    212.       text-align: left;
    213.     }
    214.   }
    215. }
    216. style>

    效果展示： 

    如果想设置展现的那部分为滚动条形式的

    （2）限制输入字符

     js：

    1. methods:{
    2.     // 内容改变事件
    3.     onEditorChange({ quill, html, text }){
    4.       // console.log( quill, html, text );
    5.       this.content=html;
    6.       if(this.$refs.ruleForm){
    7.         this.$refs.ruleForm.validateField('content')
    8.       }
    9.       let event=this.$refs.mwQuillEditor;
    10.       event.quill.deleteText(10,1)
    11.       if(this.content===''){
    12.         this.TiLength=0
    13.       }else{
    14.         this.TiLength=event.quill.getLength()-1
    15.       }
    16.     }
    17.   }

    效果展示 ：

    （3）自定义控制上传的图片大小

    • 安装插件

    npm i quill-image-resize-module

    •  在vue.config.js 文件中添加配置，记得重启哦~
    1. //其他配置
    2.   configureWebpack: {
    3.     plugins: [
    4.       new webpack.ProvidePlugin({
    5.         "window.Quill": "quill/dist/quill.js",
    6.         Quill: "quill/dist/quill.js",
    7.       }),
    8.     ],
    9.   }

    引入

    // 调整上传图片大小

    import ImageResize from 'quill-image-resize-module'

    Quill.register('modules/imageResize', ImageResize)

     放在toolbar下面就可以

    1. // 调整图片大小
    2.           imageResize: {
    3.             displayStyles: {
    4.               backgroundColor: "black",
    5.               border: "none",
    6.               color: "white"
    7.             },
    8.             modules: ["Resize", "DisplaySize", "Toolbar"]
    9.           }

  • 相关阅读:
    Python递归的几个经典案例
    GCP之Google Cloud Infrastructure
    各省GDP可视化案列，附带csv Metabase处理
    C. Swap Game（简单博弈）
    Java实现五子棋对战小游戏【完整版】
    23种设计模式——策略模式
    Hawkeye
    MacBook 常用快捷键使用
    安装java编译器
    探索 Symfony 框架：工作原理、特点及技术选型
  • 原文地址：https://blog.csdn.net/qq_46703452/article/details/127447367