今天小編給大家分享一下vue中怎么安裝使用froala的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Step1：

　　froala 依賴于jQuery。所以要安裝jQuery；

yarn add jquery

或者

npm install jquery --save

　　froala 依賴于 babel-runtime。所以也要安裝。

yarn add babel-runtime@6.26.0

或者

npm install babel-runtime@6.26.0

Step2：

在main.js 里引入jQuery。

importjqueryfrom'jquery'
window.jquery=window.$=jquery

在main.js里引入froala相關(guān)的文件并且進(jìn)行相應(yīng)的配置。

require('froala-editor/js/froala_editor.pkgd.min')
require('froala-editor/css/froala_editor.pkgd.min.css')
require('font-awesome/css/font-awesome.css')
require('froala-editor/css/froala_style.min.css')

importVueFroalafrom'vue-froala-wysiwyg'
Vue.use(VueFroala)

Step3 :

這個時候就可以使用froala這個組件啦~。

在某個.vue文件中：

<template>
<div>
<froala:tag="'textarea'":config="config"v-model="model"></froala>
</div>
</template>

<script>
importVueFroalafrom'vue-froala-wysiwyg';

exportdefault{
name:'app',
data(){
return{
config:{
events:{
'froalaEditor.initialized':function(){
console.log('initialized')
}
}
},
model:'EditYourContentHere!'
}
}
}
</script>

總結(jié)

以上是生活随笔為你收集整理的vue中怎么安装使用froala的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。