富文本編輯器網址： https://www.froala.com/wysiwyg-editor
按官網安裝`Froala-Editor`可能會出現工具欄按鈕顯示不全等問題，下面是自己安裝方法；
1. 把富文本編輯器版本改成2.9.0：
npm install vue-froala-wysiwyg@2.9.0 --save
npm install jquery --save
2. 在`main.js`中插入下面代碼：
//引入 Froala Editor js file.
require('froala-editor/js/froala_editor.pkgd.min')
//引入中文語言包
require('froala-editor/js/languages/zh_cn')
//引入 Froala Editor css files.
require('froala-editor/css/froala_editor.pkgd.min.css')
require('font-awesome/css/font-awesome.css')
require('froala-editor/css/froala_style.min.css')
// Import and use Vue Froala lib.
import jQuery from 'jquery'
import VueFroala from 'vue-froala-wysiwyg'
window.$ = jQuery
Vue.use(VueFroala)
3. 在文本框頁面`app.vue`中config來配置富文本編輯器，v-model來數據傳遞：
<
template
>
<
div
id=
"app"
>
<
froala :
tag="
'textarea'" :
config="
froalaConfig"
v-model="
froalaContent"
></
froala
>
</
div
>
</
template
>
<
script
>
import
jQuery
from
'jquery'
import
VueFroala
from
'vue-froala-wysiwyg'
export
default {
name:
'app',
data () {
return {
//More -> https://www.froala.com/wysiwyg-editor/docs/options
froalaConfig: {
toolbarButtons: [
'undo',
'redo',
'clearFormatting',
'|',
'bold',
'italic',
'underline',
'strikeThrough',
'|',
'fontFamily',
'fontSize',
'color',
'|',
'paragraphFormat',
'align',
'formatOL',
'formatUL',
'outdent',
'indent',
'quote',
'-',
'insertLink',
'insertImage',
'insertVideo',
'embedly',
'insertFile',
'insertTable',
'|',
'emoticons',
'specialCharacters',
'insertHR',
'selectAll',
'|',
'print',
'spellChecker',
'help',
'|',
'fullscreen'],
//['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color',
'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink',
'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll',
'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//顯示可操作項
// theme: "dark",//主題
placeholder:
"請填寫內容",
language:
"zh_cn",
//國際化
imageUploadURL:
"http://i.froala.com/upload",
//上傳url
fileUploadURL:
"http://i.froala.com/upload",
//上傳url 更多上傳介紹 請訪問https://www.froala.com/wysiwyg-editor/docs/options
quickInsertButtons: [
'image',
'table',
'ul',
'ol',
'hr'],
//快速插入項
// toolbarVisibleWithoutSelection: true,//是否開啟 不選中模式
// disableRightClick: true,//是否屏蔽右擊
colorsHEXInput:
false,
//關閉16進制色值
toolbarSticky:
true,
//操作欄是否自動吸頂
zIndex:
99999,
events: {
'froalaEditor.initialized'
:
function () {
console.
log(
'initialized')
}
},
},
froalaContent:
"<p>www</p>",
//默認測試文本
}
}
}
</
script
>
4. 圖示：
