• vue2 quill 视频上传 ，基于ruoyi vue,oss

    包含两种上传方式，第一种点开弹新页面可选url和点击上传。本文中是第二种，自己拼的。像点击上传图片一样，直接传video文件，原创不易，纯纯踩坑；

    因为现阶段能搜索到的内容，99.5%都是一样的内容，无法满足需求。

    我的需求是在ruoyi-vue里面用quill富文本，但里面一部分功能没有。

    但作者给了自定义插件通道。

    如果根据我的代码去写，上传完视频 就拿不到光标，只能拿到最后一个字的长度，因此上传视频被提成bug。

    自猜：点击完tag的上传视频 是打开个子页面，父子页面传值可能存在问题。

    无奈之下只能自己手拼。看代码吧。如有问题请及时指正。

    所有代码在同级目录下

    贴代码

    index.vue

    1. <template>
    2.   <div>
    3.  
    4.     <el-upload
    5.       :action="uploadUrl"
    6.       :before-upload="handleBeforeUpload"
    7.       :http-request="uploadURL"
    8.       name="file"
    9.       :show-file-list="false"
    10.       :headers="headers"
    11.       style="display: none"
    12.       ref="upload"
    13.       v-if="this.type == 'url'"
    14.     >
    15.     </el-upload>
    16.  
    17.     <div class="editor" ref="editor" :style="styles"></div>
    18.   
    19.     <!--视频上传 begin -->
    20.  
    21.      <!-- <el-tab-pane label="添加视频链接" name="second">
    22.                 <el-input v-model="videoDialog.videoLink" placeholder="请输入视频链接" clearable></el-input>
    23.                 <el-button type="primary" size="small" style="margin: 20px 0px 0px 0px" @click="addVideoLink(videoDialog.videoLink)">添加 </el-button>
    24.             </el-tab-pane> -->
    25.  
    26.  <!--<div>
    27.     <el-dialog :close-on-click-modal="false" width="50%" style="margin-top: 1px" title="视频上传" :visible.sync="videoDialog.show" append-to-body   ref="dialogRef">
    28.         <el-tabs v-model="videoDialog.activeName">
    29.            
    30.             <el-tab-pane label="本地视频上传"  >
    31.               
    32.                 <el-upload
    33.                 v-loading="uploading"
    34.                         style="text-align: center"
    35.                         drag
    36.                         action=""
    37.                         accept="video/*"
    38.   :http-request="uploadVideoURL"
    39.   :multiple="false"
    40.   :before-upload="videoHandleBeforeUpload"
    41.   v-if="this.type == 'video'"
    42. >
    43.  
    44.                     <i class="el-icon-upload"></i>
    45.                     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    46.                 </el-upload>
    47.             </el-tab-pane>
    48.         </el-tabs>
    49.     </el-dialog>
    50. </div> -->
    51.  
    52. <!-- :http-request="uploadVideoURL"
    53.   :multiple="false"
    54.   :before-upload="videoHandleBeforeUpload"
    55.   style="display: none" -->
    56. <el-upload
    57.  
    58.  
    59.       name="file"
    60.       :show-file-list="false"
    61.       :headers="headers"
    62.       style="display: none"
    63.       ref="uploadVideo"
    64.  
    65.       :http-request="uploadVideoURL"
    66.       :before-upload="videoHandleBeforeUpload"
    67.       action="uploadVideoURL"
    68.       :multiple="false"
    69.       v-if="this.video == 'r'"
    70. >
    71.  
    72.                     <i class="el-icon-upload"></i>
    73.                     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    74.                 </el-upload>
    75.  
    76.  
    77.     <!--视频上传 end -->
    78.   </div>
    79. </template>
    80.  
    81. <script>
    82. import Quill from "quill";
    83. import "quill/dist/quill.core.css";
    84. import "quill/dist/quill.snow.css";
    85. import "quill/dist/quill.bubble.css";
    86. import { getToken } from "@/utils/auth"; 
    87. import {client,	getFileNameUUID} from '@/utils/alioss';
    88.  
    89. let fontFamily = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'];
    90. Quill.imports['formats/font'].whitelist = fontFamily;
    91. Quill.register(Quill.imports['formats/font']);
    92. let fontSize = ['10px', '11px','12px', '14px', '15px', '16px', '17px', '18px', '20px', '24px', '36px']
    93. Quill.imports['attributors/style/size'].whitelist = fontSize;
    94. Quill.register(Quill.imports['attributors/style/size']);
    95.  
    96. import Video from "./video.js";
    97. // import Buffer from "vue-buffer";
    98.  
    99.  
    100. Quill.register(Video, true);
    101.  
    102.  
    103.  
    104. // 行高
    105. import { lineHeightStyle } from './lineHeight.js';
    106. Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
    107.  
    108.  // 行间距
    109. import { letterSpacingStyle } from './letterSpacing.js';
    110. Quill.register({ 'formats/letterSpacing': letterSpacingStyle }, true);
    111.  
    112. Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
    113.  
    114. export default {
    115.   name: "Editor",
    116.   props: {
    117.     /* 编辑器的内容 */
    118.     value: {
    119.       type: String,
    120.       default: "",
    121.     },
    122.     /* 高度 */
    123.     height: {
    124.       type: Number,
    125.       default: null,
    126.     },
    127.     /* 最小高度 */
    128.     minHeight: {
    129.       type: Number,
    130.       default: null,
    131.     },
    132.     /* 只读 */
    133.     readOnly: {
    134.       type: Boolean,
    135.       default: false,
    136.     },
    137.     // 上传文件大小限制(MB)
    138.     fileSize: {
    139.       type: Number,
    140.       default: 5,
    141.     },
    142.     /* 类型（base64格式、url格式） */
    143.     type: {
    144.       type: String,
    145.       default: "url",
    146.     },
    147.     video: {
    148.       type: String,
    149.       default: "r",
    150.     }
    151.   },
    152.   data() {
    153.     return {
    154.       aliyun :{},
    155.       uploading : false,
    156.       videoDialog: {show: false,activeName: null,videoLink:null},
    157.       uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
    158.       headers: {
    159.         Authorization: "Bearer " + getToken()
    160.       },
    161.       Quill: null,
    162.       currentValue: "",
    163.       options: {
    164.         theme: "snow",
    165.         bounds: document.body,
    166.         debug: "warn",
    167.         modules: {
    168.           // 工具栏配置
    169.           toolbar: {
    170.             handlers: {
    171.         // lineHeight: (value) => {
    172.         //     if (value) {
    173.         //         let quill = this.$refs.myQuillEditor.quill;
    174.         //         quill.format("lineHeight", value);
    175.         //     }
    176.         // },
    177.         // lineHeight :['initial', '1', '1.5', '1.75', '2', '3', '4', '5'],
    178.         video: (value) => {
    179.             this.videoDialog.show = true;
    180.         },
    181.       },
    182.       container : 
    183.       [
    184.             ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
    185.             ["blockquote", "code-block"],                    // 引用  代码块
    186.             [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
    187.             [{ indent: "-1" }, { indent: "+1" }],            // 缩进
    188.             // [{ size: ["small", false, "large", "huge"] }],   // 字体大小
    189.             [{ size:fontSize }],   // 字体大小
    190.  
    191.             // [{ size: [ "ten",false,"eleven", "twelve", "thirteen",
    192.             //     "fourteen", "fifteen", "sixteen", "seventeen",
    193.             //     "eighteen", "nineteen", "twenty"]}],
    194.  
    195.             [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
    196.             [{ color: ['aqua', 'black', 'blue', 'brown', 'cyan', 'gold', 'gray', 'green', 'indigo', 'lavender', 'lime', 'magenta', 'maroon', 'navy', 'olive', 'orange', 'pink', 'purple', 'red', 'silver', 'teal', 'violet', 'white', 'yellow'] },
    197.              { background: ['aqua', 'black', 'blue', 'brown', 'cyan', 'gold', 'gray', 'green', 'indigo', 'lavender', 'lime', 'magenta', 'maroon', 'navy', 'olive', 'orange', 'pink', 'purple', 'red', 'silver', 'teal', 'violet', 'white', 'yellow']
    198.              }],             // 字体颜色、字体背景颜色
    199.             [{ align: [] }],                                 // 对齐方式
    200.             ["clean"],                                       // 清除文本格式
    201.             ["image", "video"],                       // 链接、图片、视频
    202.              [{lineheight: ['initial', '1', '2', '3', '4', '5','20'] }],
    203.             [{ letterSpacing: [ 'initial','2px','4px', '6px','8px','10px', '12px', '14px', '16px'],},], //行间距
    204.             // ["link", "image", "video"]                       // 链接、图片、视频
    205.             
    206.           ],
    207.           }
    208.         },
    209.       
    210.         placeholder: "请输入内容",
    211.         readOnly: this.readOnly,
    212.        
    213.  
    214.       },
    215.     };
    216.   },
    217.   computed: {
    218.     styles() {
    219.       let style = {};
    220.       if (this.minHeight) {
    221.         style.minHeight = `${this.minHeight}px`;
    222.       }
    223.       if (this.height) {
    224.         style.height = `${this.height}px`;
    225.       }
    226.       return style;
    227.     },
    228.   },
    229.   watch: {
    230.     value: {
    231.       handler(val) {
    232.         if (val !== this.currentValue) {
    233.           this.currentValue = val === null ? "" : val;
    234.           if (this.Quill) {
    235.             this.Quill.pasteHTML(this.currentValue);
    236.           }
    237.         }
    238.       },
    239.       immediate: true,
    240.     },
    241.   },
    242.   mounted() {
    243.  
    244.     this.init();
    245.  
    246.   },
    247.   methods: {
    248.  
    249.  
    250.         // 上传文件之前
    251. 			videoHandleBeforeUpload(file) {
    252. 				const isJpgOrPng =
    253.     file.type === 'video/ogg' ||
    254.     file.type === 'video/flv' ||
    255.     file.type === 'video/avi' ||
    256.     file.type === 'video/wmv' ||
    257.     file.type === 'video/mov' ||
    258.     file.type === 'video/mp4'
    259.   if (!isJpgOrPng) {
    260.     this.$message.error('只能上传图片/视频！')
    261.     return
    262.   }
    263. 			},
    264. 			uploadURL(file) {
    265. 				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
    266. 				var fileName = 'imgs/'+'editor' + getFileNameUUID() + "." + file.file.name.replace(/.+\./, "");//'.jpg';
    267. 				client().multipartUpload(fileName, file.file,{
    268.                 progress: function(percentage, cpt) {
    269.                   console.log('打印进度',percentage)
    270.                 }
    271.               }).then((res)=>{
    272.           //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
    273.           let quill = this.Quill;
    274.           let length = quill.getSelection().index;
    275.           console.log("quill.getSelection().index===",length);
    276.           console.log(quill.getSelection());
    277.         // 插入图片  res.url为服务器返回的图片地址
    278.         quill.insertEmbed(length, "image", 'https://oss-cn-beijing.aliyuncs.com/' + fileName);
    279.         // 调整光标到最后
    280.         quill.setSelection(length + 1);
    281.         })
    282.       },
    283.       
    284.     init() {
    285.       const editor = this.$refs.editor;
    286.       this.Quill = new Quill(editor, this.options);
    287.       // 如果设置了上传地址则自定义图片上传事件
    288.       if (this.type == 'url') {
    289.         let toolbar = this.Quill.getModule("toolbar");
    290.         toolbar.addHandler("image", (value) => {
    291.           this.uploadType = "image";
    292.           if (value) {
    293.             this.$refs.upload.$children[0].$refs.input.click();
    294.           } else {
    295.             this.quill.format("image", false);
    296.           }
    297.         });
    298.       }
    299.       //todo begin
    300.       console.log("this.video",this.video);
    301.       if (this.video == 'r') {
    302.         let toolbar = this.Quill.getModule("toolbar");
    303.         toolbar.addHandler("video", (value) => {
    304.           this.uploadType = "video";
    305.           console.log("value",value);
    306.           if (value) {
    307.             this.$refs.uploadVideo.$children[0].$refs.input.click();
    308.           } else {
    309.             this.quill.format("video", false);
    310.           }
    311.         });
    312.       }
    313.       //todo end
    314.       this.Quill.pasteHTML(this.currentValue);
    315.       this.Quill.on("text-change", (delta, oldDelta, source) => {
    316.         const html = this.$refs.editor.children[0].innerHTML;
    317.         const text = this.Quill.getText();
    318.         const quill = this.Quill;
    319.         this.currentValue = html;
    320.         this.$emit("input", html);
    321.         this.$emit("on-change", { html, text, quill });
    322.       });
    323.       this.Quill.on("text-change", (delta, oldDelta, source) => {
    324.         this.$emit("on-text-change", delta, oldDelta, source);
    325.       });
    326.       this.Quill.on("selection-change", (range, oldRange, source) => {
    327.         this.$emit("on-selection-change", range, oldRange, source);
    328.       });
    329.       this.Quill.on("editor-change", (eventName, ...args) => {
    330.         this.$emit("on-editor-change", eventName, ...args);
    331.       });
    332.     },
    333.     handleBeforeUpload(file) {
    334. 				const isJPEG = file.name.split('.')[1] === 'jpeg';
    335. 				const isJPG = file.name.split('.')[1] === 'jpg';
    336. 				const isPNG = file.name.split('.')[1] === 'png';
    337. 				const isWEBP = file.name.split('.')[1] === 'webp';
    338. 				const isGIF = file.name.split('.')[1] === 'gif';
    339. 				const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
    340. 				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
    341. 					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
    342. 				}
    343. 				if (!isLt500K) {
    344. 					this.$message.error('单张图片大小不能超过 4mb!');
    345. 				}
    346. 				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
    347. 			},
    348.  
    349.       uploadVideoURL(file) {
    350. 				//注意哦，这里指定文件夹'image/'，尝试过写在配置文件，但是各种不行，写在这里就可以
    351. 				var fileName = 'imgs/'+'editor' + getFileNameUUID() + "." + file.file.name.replace(/.+\./, "");//'.jpg';
    352. 				client().multipartUpload(fileName, file.file,{
    353.                 progress: function(percentage, cpt) {
    354.                   // console.log('打印进度',percentage)
    355.                 }
    356.               }).then((res)=>{
    357.           //此处赋值，是相当于上传成功之后，手动拼接服务器地址和文件名
    358.  
    359.           this.videoDialog.show = false;
    360.         // console.log("this.$parent.editor",this.$parent.editor);
    361.         
    362.  
    363.         // let editor = this.$refs['editor'];
    364.         // this.init();
    365.         let quill = this.Quill;
    366.         let lengthSelection = quill.getSelection().index;
    367.         console.log("quill.getSelection().index===",lengthSelection);
    368.  
    369.         // console.log("this.$refs.editer.quill.selection.savedRange.index",this.$refs.editer.quill.selection.savedRange.index);
    370.        
    371.         console.log("quill.getLength()",quill.getLength());
    372.       // 获取富文本
    373.       // let range = quill.getSelection().index;
    374.       // 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null
    375.       // let index = range ? range.index : 0
    376.  
    377.         // let quill = this.Quill;
    378.  
    379.         var length = quill.getLength();
    380.         if(quill.getSelection()){
    381.           length = quill.getSelection().index;
    382.           // console.log("quill.getSelection().index===",length);
    383.         }
    384.         // console.log(quill.getSelection());
    385.         let resp = 'https://oss-cn-beijing.aliyuncs.com/' + fileName;
    386.  
    387.  
    388.     // 插入
    389.     quill.insertEmbed(length, "video", resp);
    390.     // 调整光标到最后
    391.     quill.setSelection(length + 1);
    392.  
    393.  
    394.  
    395.  
    396.     this.$forceUpdate();
    397.         })
    398.       },
    399.  
    400.   },
    401. };
    402.  
    403. </script>
    404.  
    405. <style>
    406. .editor, .ql-toolbar {
    407.   white-space: pre-wrap !important;
    408.   line-height: normal !important;
    409. }
    410. .quill-img {
    411.   display: none;
    412. }
    413. .ql-snow .ql-tooltip[data-mode="link"]::before {
    414.   content: "请输入链接地址:";
    415. }
    416. .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    417.   border-right: 0px;
    418.   content: "保存";
    419.   padding-right: 0px;
    420. }
    421.  
    422. .ql-snow .ql-tooltip[data-mode="video"]::before {
    423.   content: "请输入视频地址:";
    424. }
    425.  
    426. .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    427. .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    428.   content: "14px";
    429. }
    430. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    431. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    432.   content: "10px";
    433. }
    434.  
    435. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    436. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    437.   content: "18px";
    438. }
    439. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    440. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    441.   content: "32px";
    442. }
    443. /*todo begin*/
    444.  
    445. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
    446. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
    447.   content: '10px';
    448. }
    449. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='11px']::before,
    450. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='11px']::before {
    451.   content: '11px';
    452. }
    453. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
    454. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
    455.   content: '12px';
    456. }
    457. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
    458. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
    459.   content: '14px';
    460. }
    461. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='15px']::before,
    462. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='15px']::before {
    463.   content: '15px';
    464. }
    465. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
    466. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
    467.   content: '16px';
    468. }
    469. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='17px']::before,
    470. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='17px']::before {
    471.   content: '17px';
    472. }
    473. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
    474. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
    475.   content: '18px';
    476. }
    477. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
    478. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
    479.   content: '20px';
    480. }
    481. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
    482. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
    483.   content: '24px';
    484. }
    485. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
    486. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
    487.   content: '36px';
    488. }
    489.  
    490.  
    491.  
    492.  
    493.  
    494.  
    495.  
    496.   /*todo end*/
    497. .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    498. .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    499.   content: "文本";
    500. }
    501. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    502. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    503.   content: "标题1";
    504. }
    505. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    506. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    507.   content: "标题2";
    508. }
    509. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    510. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    511.   content: "标题3";
    512. }
    513. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    514. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    515.   content: "标题4";
    516. }
    517. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    518. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    519.   content: "标题5";
    520. }
    521. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    522. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    523.   content: "标题6";
    524. }
    525.  
    526. .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    527. .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    528.   content: "标准字体";
    529. }
    530. .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    531. .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    532.   content: "衬线字体";
    533. }
    534. .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    535. .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    536.   content: "等宽字体";
    537. }
    538. </style>
    539.  
    540.  
    541. <style>
    542. /* .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
    543. .ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
    544.   content: '行高';
    545. }
    546. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="行高"]::before,
    547. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::before {
    548.   content: '默认';
    549. }
    550. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
    551. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {
    552.   content: '1px';
    553. }
    554. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
    555. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
    556.   content: '1.5px';
    557. }
    558. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.75"]::before,
    559. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {
    560.   content: '1.75px';
    561. }
    562. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
    563. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
    564.   content: '2px';
    565. }
    566. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
    567. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
    568.   content: '3px';
    569. }
    570. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
    571. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
    572.   content: '4px';
    573. }
    574. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
    575. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {
    576.   content: '5px';
    577. } 
    578. .ql-snow .ql-picker.ql-lineheight {
    579.   width: 70px;
    580. }*/
    581. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label::before,
    582. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item::before {
    583.   content: '字符间距';
    584. }
    585. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="字符间距"]::before,
    586. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='initial']::before {
    587.   content: '默认';
    588. }
    589. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="2px"]::before,
    590. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='2px']::before {
    591.   content: '2px';
    592. }
    593. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="4px"]::before,
    594. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='4px']::before {
    595.   content: '4px';
    596. }
    597. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="6px"]::before,
    598. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='6px']::before {
    599.   content: '6px';
    600. }
    601. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="8px"]::before,
    602. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='8px']::before {
    603.   content: '8px';
    604. }
    605. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="10px"]::before,
    606. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='10px']::before {
    607.   content: '10px';
    608. }
    609. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="12px"]::before,
    610. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='12px']::before {
    611.   content: '12px';
    612. }
    613. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="14px"]::before,
    614. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='14px']::before {
    615.   content: '14px';
    616. }
    617. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-label[data-value="16px"]::before,
    618. .ql-snow .ql-picker.ql-letterSpacing .ql-picker-item[data-value='16px']::before {
    619.   content: '16px';
    620. }
    621. .ql-snow .ql-picker.ql-letterSpacing {
    622.   width: 90px;
    623. }
    624.  
    625. </style>
    626.  
    627.  
    628.  
    629.  
    630.  <style>
    631. .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,
    632. .ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
    633.   content: '行高';
    634. }
    635.  
    636. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
    637. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {
    638.   content: "1";
    639. }
    640.  
    641. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
    642. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {
    643.   content: "2";
    644. }
    645.  
    646. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
    647. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {
    648.   content: "3";
    649. }
    650.  
    651. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
    652. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before {
    653.   content: "4";
    654. } 
    655.  
    656. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,
    657. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before {
    658.   content: "5";
    659. }
    660.  
    661. .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="20"]::before,
    662. .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="20"]::before {
    663.   content: "20";
    664. }
    665.  
    666. .ql-snow .ql-picker.ql-lineheight {
    667.   width: 70px;
    668. }
    669.  
    670.  
    671.  
    672.  
    673.  
    674. </style> 
    675.  
    676.  
    677.  
    678.  
    679.  
    680.  
    681.  
    682.  
    683.  
    684.  
    685.  
    686.  
    687.  
    688.  
    689.

    letterSpacing.js

    1. import Quill from 'quill'
    2. let Parchment = Quill.import('parchment')
    3. // 字符间距
    4. class letterSpacingAttributor extends Parchment.Attributor.Style {}
    5. const letterSpacingStyle = new letterSpacingAttributor(
    6.   'letter-spacing',
    7.   'letterSpacing',
    8.   {
    9.     scope: Parchment.Scope.INLINE,
    10.     whitelist: [
    11.       'initial',
    12.       '2px',
    13.       '4px',
    14.       '6px',
    15.       '8px',
    16.       '10px',
    17.       '12px',
    18.       '14px',
    19.       '16px',
    20.     ],
    21.   }
    22. )
    23. export { letterSpacingStyle }

    lineHeight.js

    1. import Quill from 'quill'
    2. let Parchment = Quill.import('parchment')
    3.  
    4. // 行高
    5. class lineHeightAttributor extends Parchment.Attributor.Style {}
    6. const lineHeightStyle = new lineHeightAttributor(
    7.     // 'line-height',  'lineHeight',
    8.  
    9.     // 'lineheight',  'ql-lineheight',
    10.  'lineheight',  'line-height',
    11.  
    12.  
    13. //  'line-height','lineheight', 
    14.  
    15.      {
    16.   scope: Parchment.Scope.INLINE,
    17.   whitelist: ['initial', '1', '2', '3', '4', '5','20'],
    18. })
    19. export { lineHeightStyle }
    20.  
    21.  
    22.  
    23.

    quill-title.js

    1. const titleConfig = {
    2.     'ql-bold': '加粗',
    3.     'ql-color': '颜色',
    4.     'ql-font': '字体',
    5.     'ql-code': '插入代码',
    6.     'ql-italic': '斜体',
    7.     'ql-link': '添加链接',
    8.     'ql-background': '背景颜色',
    9.     'ql-size': '字体大小',
    10.     'ql-strike': '删除线',
    11.     'ql-script': '上标/下标',
    12.     'ql-underline': '下划线',
    13.     'ql-blockquote': '引用',
    14.     'ql-header': '标题',
    15.     'ql-indent': '缩进',
    16.     'ql-list': '列表',
    17.     'ql-align': '文本对齐',
    18.     'ql-direction': '文本方向',
    19.     'ql-code-block': '代码块',
    20.     'ql-formula': '公式',
    21.     'ql-image': '图片',
    22.     'ql-video': '视频',
    23.     'ql-clean': '清除字体样式',
    24.     'ql-lineheight': '行高',
    25.     'ql-letterSpacing': '字符间距',
    26.   }
    27.   
    28.   export function addQuillTitle() {
    29.     const oToolBar = document.querySelector('.ql-toolbar'),
    30.       aButton = oToolBar.querySelectorAll('button'),
    31.       aSelect = oToolBar.querySelectorAll('select')
    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'
    37.           ? (item.title = '向右缩进')
    38.           : (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.   }
    47.

    video.js

    1. import { Quill } from "vue-quill-editor";
    2. // 源码中是import直接导入，这里要用Quill.import引入
    3. const BlockEmbed = Quill.import("blots/block/embed");
    4. const Link = Quill.import("formats/link");
    5. const ATTRIBUTES = ["height", "width"];
    6. class Video extends BlockEmbed {
    7.     static create(value) {
    8.         const node = super.create(value);
    9.         // 添加video标签所需的属性
    10.         node.setAttribute("controls", "controls");
    11.         node.setAttribute("type", "video/mp4");
    12.         node.setAttribute("src", this.sanitize(value));
    13.         //为了兼容 iOS 设备上，显示海报图（视频封面）
    14.         node.setAttribute("preload", "metadata");
    15.  
    16.         // node.setAttribute("poster", value.poster);
    17.         node.setAttribute("webkit-playsinline", "true");
    18.  
    19.         return node;
    20.     }
    21.     static formats(domNode) {
    22.         return ATTRIBUTES.reduce((formats, attribute) => {
    23.             if (domNode.hasAttribute(attribute)) {
    24.                     formats[attribute] = domNode.getAttribute(attribute);
    25.             }
    26.             return formats;
    27.         }, {});
    28.     }
    29.     static sanitize(url) {
    30.         return Link.sanitize(url); // eslint-disable-line import/no-named-as-default-member
    31.     }
    32.     static value(domNode) {
    33.         return domNode.getAttribute("src");
    34.         // return {
    35.         //     url: domNode.getAttribute('src'),
    36.         //     poster: domNode.getAttribute('poster')
    37.         // }
    38.     }
    39.     format(name, value) {
    40.         if (ATTRIBUTES.indexOf(name) > -1) {
    41.             if (value) {
    42.                     this.domNode.setAttribute(name, value);
    43.             } else {
    44.                     this.domNode.removeAttribute(name);
    45.             }
    46.         } else {
    47.             super.format(name, value);
    48.         }
    49.     }
    50.     html() {
    51.         const { video } = this.value();
    52.         return `<a href="${video}">${video}</a>`;
    53.     }
    54. }
    55. Video.blotName = "video";
    56. Video.className = "ql-video";
    57. Video.tagName = "video"; // 用video标签替换iframe
    58. export default Video;

  • 相关阅读:
    vue3 如何国际化
    【编程题】【Scratch三级】2021.09 计算平均分
    java70-GUL图形用户界面初识
    从阿里云容器攻防矩阵&API安全生命周期，看如何构建金融安全云原生平台
    springboot整合xxl-job分布式定时任务【图文完整版】
    255-261BFC,媒体的类型，媒体的特性，浏览器前缀，媒体查询，逻辑操作符，
    49 多个 classloader 加载的同类限定名的Class 在 jhat 中显示不全
    部署kubernetes-v1.25.3（k8s）- 基于containerd容器运行时
    nginx配置http负载均衡转发
    CSS calc() 使用指南
  • 原文地址：https://blog.csdn.net/yangziqi098/article/details/134046247