In regard to the use of wangEditor vue project

1, vue mounted wangEditor

 npm used to install npm install wangeditor --save

2, create a public assembly 

Create a folder in the components in wangEnduit

Component content

<template lang="html">
  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  export default {
    name: 'editoritem',
    data() {
      return {
        // uploadPath,
        editor: null,
        info_: null
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isClear (Val) { 
        // trigger clear text contents field 
        IF (Val) {
           the this .editor.txt.clear ()
           the this .info_ =  null 
        } 
      }, 
      value: function (value) {
         IF (value ! ==  the this .editor .txt.html ()) {
           the this .editor.txt.html ( the this .Value) 
        } 
      } 
      // value content edit box, where I listen a bit value, when the parent component calls have time, if the value assigned to the subassembly will show the values assigned to the parent component 
    }, 
    Mounted () { 
      the this .seteditor ()
       the this .editor.txt.html (the this  .Value) 
    },
    Methods: { 
      setEditor () { 
        // http://192.168.2.125:8080/admin/storage/create 
        the this .editor =  new new E ( the this . $ refs.toolbar, the this . $ refs.editor)
         the this .editor. customConfig.uploadImgShowBase64 =  to false  // Base image 64 is stored 
        the this .editor.customConfig.uploadImgServer =  ' http://otp.cdinfotech.top/file/upload_images ' // configuration server side address 
        the this .editor.customConfig.uploadImgHeaders = {} // custom header 
        the this.editor.customConfig.uploadFileName =  ' File '  // backend to accept the parameter name of the uploaded file 
        the this .editor.customConfig.uploadImgMaxSize =  2  *  1024  *  1024  // The image size is limited to 2M 
        the this .editor.customConfig.uploadImgMaxLength =  6  // limit upload up to three pictures 
        the this .editor.customConfig.uploadImgTimeout =  3  *  60  *  1000  // set the timeout 

        // configuration menu 
        the this .editor.customConfig.menus = [
           ' head ', // title 
          ' Bold ' , // bold 
          ' fontSize ' , // size 
          ' fontName ' , // Font 
          ' Italic ' , // italic 
          ' underline ' , // Underline 
          ' StrikeThrough ' , // delete the line 
          ' foreColor ' , // text color 
          ' backColor ' , // background color 
          'link', // insert link 
          ' List ' , // the list of 
          ' The justify ' , // alignment 
          ' quote ' , // references 
          ' Emoticon ' , // expression 
          ' Image ' , // Insert Picture 
          ' the Table ' , // table 
          ' video ' , // insert video 
          ' code ' , // insert Code 
          ' Use the undo ' ,// undo 
          ' the redo ' , // repeat 
          ' Fullscreen '  // fullscreen 
        ] 

        the this .editor.customConfig.uploadImgHooks = { 
          Fail: (XHR, Editor, Result) => {
             // Insert image failure callback 
          }, 
          Success: (XHR , Editor, the Result) => {
             // pictures uploaded success callback 
          }, 
          timeout: (xhr, Editor) => {
             // network timeout callback 
          }, 
          error: (xhr, Editor) =>{
             // image upload error callback 
          }, 
          customInsert: (insertImg, result, Editor) => {
             // pictures uploaded successfully, insert pictures callback 
            // data upload pictures to a successful result when returned, here I printed a bit found is returned back data: [{url: "as paths"}, ...] 
            // the console.log (result.data [0] .url) 
            // insertImg () function for the inserted picture 
             // cycle insert picture 
            // for (the let I = 0; I <. 1; I ++) { 
              // the console.log (Result) 
              the let URL =  " http://otp.cdinfotech.top " + result.url 
              insertImg (URL) 
            // } 
          } 
        }
        the this .editor.customConfig.onchange = (HTML) => {
           the this .info_ = HTML // bind current value progressively 
          the this . $ EMIT ( ' Change ' , the this .info_) // content synchronized to the parent components 
        }
         // Create rich text editor 
        the this .editor.create () 
      } 
    } 
  } 
</ Script > 

< style lang = "CSS" > 
  .editor { 
    width : 100% ; 
    margin: 0 auto;
    position: relative;
    z-index: 0;
  }
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    min-height: 500px;
  }
</style>

 

3 calls in the parent component

<template>
<div>
<editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
</div>
</template>

import EditorBar from './editoritem'
components: { EditorBar },
data() {
      return {
        isClear: false,
        detail:""
        }
      },  
methods: {
  change(val) {
      console.log(val)
      
    },
 }