iView + vue-quill-editor implement a rich text editor (includes pictures, videos uploaded)

1. The introduction of plug-in (note that the following IE10 does not support)

the install VUE-Quill-NPM Editor --save 
NPM the install Quill --save (Editor-Vue-Quill relies)

2. main.js introduced

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)

3. Use the page

import} {quillEditor from 'for-quill-editor'

<div v-Show = "tuWen" class = "TU-wen"> 
          < the Upload 
            the above mentioned id = "iviewUp" 
            : Show -upload-List = "false"                // automatically upload the list of visible 
            : ON -SUCCESS = "handleSuccessQuill" 
            : format = "[ 'JPG', 'JPEG', 'PNG', 'GIF']" 
            : headers = "header"                      // setting request header 
            name = "richTextAccessory" 
            : max -size = "2048" 
            Multiple 
            : Action = "uploadRichTextImg "             // upload the interface 
            style = "Run the display: none;" 
            >
            <Button icon="ios-cloud-upload-outline" ></Button>
        </Upload>
         <quill-editor
            v-model="content"                  // 内容
            ref="myQuillEditor"                // 获取文本节点
            :options="editorOption"            
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            >
          </quill-editor>
</div>

4, Toolbar Configuration

// 工具栏配置
    const toolbarOptions = [
      ['bold', 'italic', 'underline'],
      [{'size': ['small', false, 'large', 'huge']}],
      [{'color': []}, {'background': []}],          // dropdown with defaults from theme
      [{'font': []}],
      [{'align': []}],
      ['image'],                                // remove formatting button
    ]

data（）{

  uploadRichTextImg: ''    // address of the interface to upload pictures

   uploadList: [], // rich text editor graphic list

  Content: '', // the contents of rich text
 editorOption: { // rich text editor toolbar
   modules: { 
    Toolbar: { 
      Container: toolbarOptions,   // Toolbar
       handlers: { 
        'Image': function (value) {      // transformation of the picture, by default is base64, now by iview to preach. 
          IF (value) { 
              . document.querySelector ( 'INPUT # iviewUp') the Click () 
          } {the else 
              this.quill.format ( 'Image', to false); 
          } 
        } 
      } 
    }, 
  }, 
  imageResize: {}, // since tensile defined
   placeholder: 'Please enter the article content', 
},

contentTxt: '', // rich text editor in front of 100 characters

}


methods：{

   onEditorChange(e){

      let _this = this;

      = e.html _this.content;   // tag </ p> Rendering form (focus) in <P>
       _this.contentTxt = e.text.substr (0,100);

   }
}

5.   upload success callback url in the src of insertion

 // upload pictures rich text editor of the successful operation of the 
         handleSuccessQuill (RES) { 
           console.log (RES) 
            // get rich text component instance 
            the let Quill = the this . $ Refs.myQuillEditor.quill
             // if the upload was successful 
            IF (RES) {
                 // Get the cursor position 
                the let length = quill.getSelection () index;.
                 // insert pictures, res image server returns the link address 
                quill.insertEmbed (length, 'image' , res.data.path)
                 // adjust cursor to the last 
                quill.setSelection (length +. 1 ) 
            } the else {
                // message, need to introduce the Message 
                Message.Error An ( 'picture insertion failure' ) 
            } 
},