Wangeditor (@4.7.15) - lightweight rich text editor

Effect display

Official website :https://www.wangeditor.com/ 

Use steps

vue2    

Introduce plug-ins into the page ->data Define the mount object in , Receive plug-in method -> Mount the plug-in to the specified element -> adopt .tex.html Method to set the data -> adopt change Callback to receive data

1. download

   npm i wangeditor

2. introduce

   import E from 'wangeditor'

3. Define mount elements

    <div id="editor" @input="Fchange"></div>

4. data Initialize container in

    editor: null,

5. Instantiate the rich text plug-in

     this.editor = new E('#editor')

6. Create and pass in settings rich text content

     this.editor.create()
     this.editor.txt.html('hello word!')

7. Listen to the content of rich text ( It seems unable to monitor in both directions )

     Fchange(e) {
         console.log(e.target.innerHTML)
         //this.OpageData.OselectTrue.content = e.target.innerHTML
      },

summary