WangEditor rich text is used in Vue

WangEditor website: www.wangeditor.com/index.html

NPM install NPM I wangEditor –save

<template>
    <div>
          <div
            class="content"
            ref="contentFrom"
          ></div>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
      data () {
        return {
          editorHtmlArr: ' '.editor:null}},mounted() {
       this.initEditor();
      },
  methods: {
       // Rich text editor
       // The data parameter is used in the echo
    initEditor(data) {
      this.$nextTick(() = > {
        let dom = this.$refs["contentFrom"];
        this.editor = new E(dom);
        /* Configure the menu bar */
        this.editor.config.menus = [
          'head'./ / title
          'bold'./ / in bold
          'fontSize'./ / size
          'fontName'./ / font
          'italic'./ / italics
          'underline'./ / the underline
          'strikeThrough'./ / delete line
          'foreColor'.// Text color
          'backColor'.// Background color
          'link'.// Insert the link
          'list'./ / list
          'justify'.// Alignment
          'quote'./ / reference
          'emoticon'./ / expressions
          'image'.// Insert the image
          'table'./ / form
          'video'.// Insert the video
          'code'.// Insert code
          'undo'./ / cancel
          'redo'./ / repeat
          'fullscreen' / / full screen
        ];
        // Set the height
        this.editor.config.height = 500;
        
        // Set the prompt
        this.editor.config.placeholder = this.$t("email.placeholder");
        
        // Add HTTP headers when uploading images
        this.editor.config.uploadImgHeaders = {
          token: this.getToken,
          "X-XSRF-TOKEN": Cookies.get("XSRF-TOKEN"),};// Limit the number of images that can be uploaded at one time/configure the interface /
        this.editor.config.uploadImgMaxLength = 1;
        this.editor.config.uploadImgServer ="";
       //alert The popover is cancelled
        this.editor.config.customAlert = function (info) {
          console.log("info", info);
          // info is what needs to be prompted
        };
        // The callback function
        this.editor.config.uploadImgHooks = {
         // Upload image error, usually HTTP request error
         // error: function (xhr, editor, resData) {
         // this_.$notify.error({
         // message: JSON.parse(xhr.response).errors,
         / /});
         // },
          customInsert: (insertImgFn, result) = > {
            // result is the interface returned by the server
            // insertImgFn to insert the image into the editor, pass in the image SRC, execute the functioninsertImgFn(result.url); }};let that = this;
        // Configure the onchange callback
        this.editor.config.onchange = function (newHtml) {
          that.editorHtml(newHtml);
        };
        this.editor.config.uploadImgShowBase64 = true;
        // The Settings are written before create!!!!!!!!!!!!!!!
        this.editor.create();
      });
    }, 
    
    // Rich text latest HTML
    editorHtml(html) {
      this.editorHtmlArr = html;
     // this.basicForm.summaryContent = this.editorHtmlArr;}},// Echo interface
  echo(){
   this.$nextTick(() = > {
   // Data rich text editor data returned by the data interface
     this.editor.txt.html(data); // The content is displayed by default})},beforeDestroy() { 
 // Call the destruction API to destroy the current editor instance
    this.editor.destroy()    
    this.editor = null}}</script>




<style>
.w-e-toolbar {
  z-index: 2 ! important;
}
.w-e-menu {
  z-index: 2 ! important;
}
.w-e-text-container {
  z-index: 1 ! important;
}
</style>
Copy the code