使用VueFroala富文本

main.js

import VueFroala from ‘vue-froala-wysiwyg’
// 添加富文本框
Vue.use(VueFroala)

// froala/富文本配置
Vue.prototype.froalaConfig = {
  language: 'zh_cn',
  imageUploadURL: '/commonServiceServer/background/api/common/uploadImage',
  imageUploadMethod: 'POST',
  imageAllowedTypes: ['jpeg', 'jpg', 'png', 'bmp'],
  charCounterCount: true,
  toolbarButtons: {
    'moreText': {
      'buttons': ['bold', 'italic', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
    },
    'moreParagraph': {
      'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
    },
    'moreRich': {
      'buttons': ['insertLink', 'insertImage', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertHR']
    },
    'moreMisc': {
      'buttons': ['undo', 'redo', 'fullscreen', 'html', 'spellChecker', 'selectAll', 'help'],
      'align': 'right',
      'buttonsVisible': 4
    }
  }
}

HTML

 <froala
                        ref="editor"
                        :tag="'textarea'"
                        :config="config"
                        :content="DetailData.content"
                        v-model="DetailData.content"
                      ></froala>

data

 config: {
        ...this.froalaConfig,
        events: {
          "image.uploaded": function(response) {
            const res = JSON.parse(response);
            this.image.insert(
              res.data[0].url,
              false,
              { id: res.data[0].resourceId },
              this.image.get()
            );
            return false;
          }
        },
        requestHeaders: {
          jtoken: this.getToken()
        }
      },