富文本编辑器froala Editor在vue中的使用

根据官方文档：https://froala.com/wysiwyg-editor/docs/framework-plugins/vue/
第一步：安装froala Editor

npm install vue-froala-wysiwyg --save

第二步：在main.js文件中引入

// Require Froala Editor js file.
require('froala-editor/js/froala_editor.pkgd.min.js')

// Require Froala Editor css files.
require('froala-editor/css/froala_editor.pkgd.min.css')
require('froala-editor/css/froala_style.min.css')

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

第三步：在需要编辑器的页面中使用

<template>
  <div>
    <froala :tag="'textarea'" :config="config" v-model="model"></froala>
  </div>
</template>
<script>
import VueFroala from 'vue-froala-wysiwyg';

export default {
  name: 'app',
  data () {
    return {
      config: {
        events: {
          'froalaEditor.initialized': function () {
            console.log('initialized')
          }
        }
      },
      model: 'Edit Your Content Here!'
    }
  }
}
</script>

这几步完成之后，运行，然后出现控制台报了一个错误：

froala Editor是一款基于jquery的编辑器，那么我在文件中引入jquery应该就可以了吧，于是我在项目中安装jquery

npm install jquery --save

然后去报错的文件中引入，也就是node_modules\vue-froala-wysiwyg\es\vue-froala.js中：

var jQuery = require('jquery')

重新运行文件

编辑器是出来了，但是上面的图标都没有
然后我查到，需要在项目中引入font-awesome
然后我在main.js文件中引入了font-awesome

import 'font-awesome/css/font-awesome.css'

成功
咦，不对啊，这是个英文的

那么，我们给项目引入一个中文包，在main.js中

require('froala-editor/js/languages/zh_cn')

然后再去使用的页面配置一下语言

language: 'zh_cn'

可以啦