根据官方文档: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'
可以啦