preface

The requirement needs to realize the function of rich text, while the rich text can also upload videos and pictures, and finally decided to use this rich text editor

Liverpoolfc.tv: quilljs.com/

Install a rich text editor

npm install vue-quill-editor --save

2, introduced in main.js

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);
Copy the code

3. Use in pages

(1) used in the template
 <div class="edit_container" style="width: 100%; height: 100%">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"> </quill-editor> <! -- Hijack the original video upload event with the input tag --> <inputtype="file" accept="video/*" name="file" ref="uploadFileVideo" id="uploadFileVideo" @change="changevideo" style="opacity: 0; width: 0; height: 0; cursor: pointer"> <! <input > <input > <inputtype="file" name="file" id="uploadFileImg" ref="uploadFileImg" @change="changeImg" style="opacity: 0; width: 0; height: 0; cursor: pointer">
    </div>
Copy the code
(2) is introduced as a script
  import * as Quill from 'quill'; Var fonts = [/ font]'Microsoft-YaHei'.'YouYuan'.'SimSun'.'SimHei'.'KaiTi'.'FangSong'.'Arial'.'Times-New-Roman'.'sans-serif'];
  var Font = Quill.import('formats/font'); Font.whitelist = fonts; // Add Font to whitelist quill.register (Font,true); /* set font Size */ var Size = quill.import ('attributors/style/size');
  Size.whitelist = ['10px'.'12px'.'14px'.'16px'.'18px'.'20px'.'24px'.false];
  Quill.register(Size, true);
Copy the code
(3) defined in the data
editorOption: {
         placeholder: 'Input text... ',
         theme: 'snow', // theme modules: {imageResize: {// Add image drag upload, custom size (see how to install below) displayStyles: {// Add backgroundColor:'black',
               border: 'none',
               color: 'white'
             },
             modules: ['Resize'.'DisplaySize'.'Toolbar'] // Add}, toolbar: {container: [['bold'.'italic'.'underline'.'strike'], // Bold, italic, underline, strikout ['blockquote'.'code-block'], // reference, code block [{'header': 1}, {'header': 2}], // title, key-value pair form; 1 and 2 indicate font size [{'list': 'ordered'}, { 'list': 'bullet'}, // list [{'script': 'sub'}, { 'script': 'super'}, // upper and lower indices [{'indent': '1'}, { 'indent': '+ 1'}], // indent [{'direction': 'rtl'}, // text direction [{'size': ['10px'.'12px'.'14px'.'16px'.'18px'.'20px'.'24px'.false}], // font size,falseSet custom size [{'header'[1, 2, 3, 4, 5, 6,false]}], //'color': []}, {'background': []}], // Font color, font background color [{'font': fonts}], // fonts [{'align': []}], // Alignment ['clean'], // clear the font style ['image'.'video'Handlers: {// handlers: {// handlers: {// handlers: {// handlers: {// handlers: {// handlers: {// handlers: {'video': function(val) {// hijack the original video click button event document.querySelector('#uploadFileVideo').click();
               },
               'image': function() {// hijack the original image click button event document.querySelector()'#uploadFileImg').click();
               }
             }
           }
         }
       }
Copy the code
(5) Methods of methods
   methods: {
      getMountData() {}, onEditorReady(editor) {},// Prepare the editoronEditorBlur() {}, // Lose focus eventonEditorFocus() {}, // get the focus eventonEditorChangeEscapeStringHTML (STR) {STR = str.replace(/&lt; /g,'<'); str = str.replace(/&gt; /g,'>');
        return str;
      },
      changeImg() {// upload the image to the server // call this.insertele in the callback ()'image', data); Method, insert image into rich text}, // image upload eventchangevideo() {// upload the video to the server // call this.insertele in the callback ()'video', data); Method, insert image into rich text}, // video upload event insertEle(type, url) {
          let quill = this.$refs.myQuillEditor.quill;
          letlength = quill.getSelection().index; // Insert the video Response.data. url as the image address returned by the serverif (type= = ='video') {
            quill.insertEmbed(length, 'simpleVideo', {
              url,
              controls: 'controls',
              width: '100%',
              height: 'auto'
            });
          } else {
            quill.insertEmbed(length, type, url); } // Adjust the cursor to the end quill.setSelection(length + 1); }}Copy the code
(6) the CSS part
.ql-snow.ql-picker.ql-header. ql-picker-item::before {content: 'text '; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, Ql-picker.ql-header.ql-picker-item [data-value="1"]::before {content: '1'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, Ql-picker.ql-header.ql-picker-item [data-value="2"]::before {content: '2'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, Ql-picker.ql-header.ql-picker-item [data-value="3"]::before {content: '3'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, Ql-picker.ql-header.ql-picker-item [data-value="4"]::before {content: '4'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, Ql-picker.ql-header.ql-picker-item [data-value="5"]::before {content: '5'; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, Ql-picker.ql-header.ql-picker-item [data-value="6"]::before {content: '6'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before, Ql-picker. ql-font. Ql-picker-item [data-value=SimSun]::before {content: "Font "; font-family: "SimSun"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before, Ql-picker. ql-font. Ql-picker-item [data-value=SimHei]::before {content: ""; font-family: "SimHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before, [data-value= microsoft-yahei]::before {content: "Microsoft-yahei "; font-family: "Microsoft YaHei"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=YouYuan]::before, .ql-snow.qL-picker.ql-font. Ql-picker-item [data-value=YouYuan]::before {content: "young "; font-family: "YouYuan"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before, .ql-snow.qL-picker.ql-font.qL-picker-item [data-value=KaiTi]::before {content: "regular "; font-family: "KaiTi"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before, .ql-snow.qL-picker.ql-font. Ql-picker-item [data-value=FangSong]::before {content: "Song "; font-family: "FangSong"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before { content: "Arial"; font-family: "Arial"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before { content: "Times New Roman"; font-family: "Times New Roman"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before { content: "sans-serif"; font-family: "sans-serif"; } .ql-font-SimSun { font-family: "SimSun"; } .ql-font-SimHei { font-family: "SimHei"; } .ql-font-YouYuan { font-family: "YouYuan"; } .ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; } .ql-font-KaiTi { font-family: "KaiTi"; } .ql-font-FangSong { font-family: "FangSong"; } .ql-font-Arial { font-family: "Arial"; } .ql-font-Times-New-Roman { font-family: "Times New Roman"; } .ql-font-sans-serif { font-family: "sans-serif"; } font style / * * / / * * /. / / the default style of ql - container {the font - size: 16 px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before { content: '10px'; font-size: 10px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before { content: '12px'; font-size: 12px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before { content: '14px'; font-size: 14px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { content: '16px'; font-size: 16px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { content: '18px'; font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before { content: '20px'; font-size: 20px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before { content: '24px'; font-size: 24px; } // Add your own fonts and stylesCopy the code

4. Install and use quill-image-resize-Module

This is a quill component that can be used to adjust images uploaded to rich text, practical and convenient.

(1) install the quill – image – resize – module

npm install quill-image-resize-module --save

(2) introduced the script
import ImageResize from 'quill-image-resize-module'/ / add a Quill. Register ('modules/imageResize', ImageResize) // AddCopy the code
(3) Configure editoroption.modules {} to add the following code (editorOption above) to what is already configured
ImageResize: {// Add displayStyles: {// Add backgroundColor:'black',
                    border: 'none',
                    color: 'white'
                  },
                  modules: ['Resize'.'DisplaySize'.'Toolbar'] // Add}Copy the code
(4) Configure the webpack.base.conf.js file in the build folder.
Var webpack = require('webpack'); Plugins: [new webpack.provideplugin ({webpack.provideplugin)'window.Quill': 'quill/dist/quill.js'.'Quill': 'quill/dist/quill.js'})]Copy the code

5, upload video custom style

(1) the new video. Js
const BlockEmbed = Quill.import('blots/block/embed');
class VideoBlot extends BlockEmbed {
  static create (value) {
    let node = super.create();
    node.setAttribute('src', value.url);
    node.setAttribute('controls', value.controls);
    node.setAttribute('width', value.width);
    node.setAttribute('height', value.height);
    node.setAttribute('webkit-playsinline'.true);
    node.setAttribute('playsinline'.true);
    node.setAttribute('x5-playsinline'.true);
    return node;
  }
  static value (node) {
    return {
      url: node.getAttribute('src'),
      controls: node.getAttribute('controls'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')}; } } VideoBlot.blotName ='simpleVideo';
VideoBlot.tagName = 'video';
export default VideoBlot;
Copy the code
(2) Introduce video.js into the component
  import VideoBlot from './video.js'; Quill.register(VideoBlot); // Use the insertEle() method above,typeIt's already noted for video, so I won't write it hereCopy the code

Ok, here is the complete configuration (background returned pictures and videos are the server address)

Attach a photo at the end

The only pity is that I didn’t have much time to study the tweaks to uploaded videos (keep going!).

Please indicate

Please give me more advice. ~