封装froala-edtior组件

npm引入froala-editor

npm install vue-froala-wysiwyg --save

main.js导入js

//Import Froala Editor 
import 'froala-editor/js/plugins.pkgd.min.js';
//Import languages 中文语言包
import 'froala-editor/js/languages/zh_cn';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import and use Vue Froala lib.
import VueFroala from 'vue-froala-wysiwyg'

Vue.use(VueFroala)

Editor组件

@/components/Editor/index.vue

<template>
  <froala v-model="content" :config="froalaConfig" />
</template>

<script>
export default {
  name: 'Editor',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      froalaConfig: {
        placeholder: '请填写内容',
        language: 'zh_cn', // 国际化
        toolbarButtons: [
          'html',
          'selectAll',
          'fontSize',
          'fontFamily',
          'textColor',
          'bold',
          'italic',
          'underline',
          'align',
          'insertLink',
          'insertImage',
          'clearFormatting',
          'insertTable',
          'undo'
        ],
        height: '450px',
        imageDefaultAlign: 'left',
        imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL'],
        imageUploadURL: '/dev-api/api/editor/editor-upload', // 图片上传api
        quickInsertEnabled: false,
        colorsHEXInput: false, // 关闭16进制色值
        toolbarSticky: false, // 操作栏是否自动吸顶
        attribution: false,
        linkList: [],
        fontSize: [
          '12',
          '14',
          '16',
          '18',
          '20',
          '22',
          '24',
          '26',
          '28',
          '30',
          '50',
          '60'
        ]
      }
    }
  },
  computed: {
    content: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('content-change', val)
      }
    }
  }
}
</script>

父组件调用编辑器

<editor ref="editor" v-model="form.content" @content-change="contentChange" />

<script>
import Editor from "@/components/Editor";
export default {
  components: { Editor },
  data() {
    return  {
      form: {}
      ...
    }
  },
  methods: {
   contentChange(val) {
      // 编辑器内容改变时，改变父组件的内容
      this.form.content = val
    },
   ...
  }
}
</script>