先上成品圖
????????????代碼貼在最下面廓握，方便大家復(fù)制辕翰。????????????
補(bǔ)充：記得 把 富文本編輯器的版本改成2.9.0台舱，否則工具欄會(huì)顯示不全涧偷。 直接按照版本安裝 cnpm install vue-froala-wysiwyg@2.9.0? --save? 就不會(huì)出現(xiàn)補(bǔ)充中的問題了
然后在main.js內(nèi)尚骄，window.$ = jQuery 下面 在加上一句?window.jQuery = jQuery 就可以了?
一開始用的時(shí)候會(huì)出現(xiàn)項(xiàng)目跑不起來的情況块差，直接安裝? @babel/runtime-corejs2 ,
? ? font-awesome 這兩個(gè)插件，就可以跑起來了倔丈。
ueditor是百度團(tuán)隊(duì)研發(fā)的一款編輯器憨闰，同樣小編也實(shí)現(xiàn)了基于vue.js的集成使用，實(shí)現(xiàn)了v-model雙向綁定需五。有需要的同學(xué)點(diǎn)擊這里進(jìn)入我的github下載源碼鹉动，不懂或者遇到問題的話可以加我微信1115009958聯(lián)系我協(xié)助你解決，有時(shí)間我會(huì)寫一篇教程上傳到簡書宏邮，敬請(qǐng)期待泽示。
這個(gè)是ueditor編輯器缸血，第二個(gè)是froala
froala-editor富文本編輯器介紹：
WYSIWYG HTML編輯器是一款有史以來最強(qiáng)大的JavaScript富文本編輯器之一。它采用了最新的技術(shù)械筛，并利用jQuery和HTML5的巨大優(yōu)勢(shì)捎泻，創(chuàng)造了出色的編輯體驗(yàn)。擁有非常多的示例讓你輕松集成埋哟，讓你的用戶愛上它清晰的設(shè)計(jì)笆豁。它能和Ruby On Rails，Django赤赊，Angular.js闯狱，Meteor，Symgony.CakePHP等集成抛计，具有如下特點(diǎn)哄孤。
～微小 - 只需添加您需要的插件(30+ 官方插件)
～可以向如PHP,Node.JS,.NET,Java, 和Python提供服務(wù)端開發(fā)工具包
～代碼注釋精美
～簡單可擴(kuò)展- 良好的插件注釋使你更容易使用和開發(fā)自己的插件
～良好的維護(hù) -持續(xù)更新
～很好的支持 -幫助中心
選擇這個(gè)編輯器的原因就是他可以全屏顯示，可以復(fù)制代碼吹截，圖片上傳和后端配置都賊方便瘦陈，大大滿足現(xiàn)有的項(xiàng)目，哦對(duì)了饭弓，主要是這個(gè)編輯器特么的支持v-model雙向綁定～～～有木有??
演示
基本演示:https://www.froala.com/wysiwyg-editor
在線演示:https://www.froala.com/wysiwyg-editor/inline
完整列表:https://www.froala.com/wysiwyg-editor/examples
開始使用
??注意：本文只講vue2.0的用法双饥，3.0的話請(qǐng)自行測試媒抠，有時(shí)間了小編會(huì)把3.0使用教程上傳上來弟断。
初始化編輯器
Froala WYSIWYG HTML編輯器是一個(gè)易于集成和易于使用的插件。它需要jQuery1.11.0或更高版本趴生，以及名為Font Awesome4.4.0的圖標(biāo)字體阀趴。你也可以使用舊版本的Font Awesome，但是某些編輯器的圖標(biāo)將不會(huì)出現(xiàn)苍匆。
下面是如何在vue.js上初始化編輯器的基本示例刘急。
首先，我們需要在項(xiàng)目列表中新建一個(gè)組件浸踩，例如該組件起名為?editor.vue 叔汁，就放在components目錄下。前提是我們已經(jīng)裝上了插件支持和main.js配置
cnpm install vue-froala-wysiwyg@2.9.0? --save
cnpm install jquery --save
在main.js插入這段代碼
第二检碗，editor.vue組件內(nèi)這樣寫入代碼
里面各個(gè)配置參數(shù)啥意思這里就不做解釋了据块，各位自行百度吧。
第三：在需要調(diào)用該組件的組件內(nèi)折剃，這樣寫
1）要先把editor組件引進(jìn)來另假，這個(gè)要是還不會(huì)的話，建議先去學(xué)習(xí)下vue基礎(chǔ)
2）這里要注意下調(diào)用子組件的方法引發(fā)的問題怕犁，詳細(xì)情況請(qǐng)查看我另一篇博文（前端踩坑小結(jié):當(dāng)element-ui的el-dialog組件中包含子組件時(shí)边篮，用refs調(diào)用子組件時(shí)的undefined問題）
ps：我的項(xiàng)目是做的后臺(tái)管理己莺，需要用到編輯器添加，編輯圖文戈轿，這里用到了vue指令v-model雙向綁定凌受，很是方便。formData數(shù)據(jù)是該組件的父組件傳過來的思杯，沒有這個(gè)數(shù)據(jù)的話自己在data里聲明一個(gè)胁艰。前端的話到這里就結(jié)束了，圖片上傳智蝠，視頻上傳的接口找你們公司后端要就行腾么，填在我打馬賽克的那幾個(gè)地方就可以了。不說了杈湾，我去飛了解虱。哈哈??
ps：正式打包上線的時(shí)候，可能有些問題漆撞，比如會(huì)出現(xiàn)圖標(biāo)字體找不到等等殴泰，有時(shí)間我會(huì)把問題的解決方案更新上來，敬請(qǐng)關(guān)注
更新：
打包上線后會(huì)出現(xiàn)以下幾個(gè)問題：
1）.woff等圖標(biāo)字體找不到浮驳，導(dǎo)致下圖這個(gè)情況～
分析：
仔細(xì)檢查控制臺(tái)報(bào)的錯(cuò)誤 xxxx404悍汛，不要怕，404不就是沒找到嘛至会，在看路徑發(fā)現(xiàn)多了css/static這兩層路徑离咐，打包后static文件夾下面直接就可以找到fonts文件夾的，原來這都是webpack搞的鬼奉件，我們這樣解決就好宵蛀，當(dāng)然，你也可以在css目錄下新建一個(gè)static文件夾县貌，再把fonts文件夾復(fù)制過去术陶，不過這是最笨的方法，下面看標(biāo)準(zhǔn)解決方案煤痕。
解決方案：
在build文件夾下的webpack.prod.conf.js文件中修改extract: true為false梧宫，然后在重新打包上傳即可。
上傳服務(wù)器后摆碉，你發(fā)現(xiàn)控制臺(tái)不報(bào)錯(cuò)了塘匣，圖標(biāo)字體頁找到了，界面頁正常了兆解，（腰也不痛了馆铁，腎也好了，一晚上又可以好幾次了锅睛，哈哈哈??）可是～～怎么會(huì)出現(xiàn)紅色背景警告一樣的英文呢埠巨，什么鬼～
這就是第二個(gè)問題历谍，froala編輯器其實(shí)是收費(fèi)的，但是我們可以免費(fèi)使用他（什么亂七八糟的辣垒，就是干）別急望侈，看看怎么解決他個(gè)狗日的。
你可能會(huì)想到勋桶，用css的display：none隱藏掉不就可以了嗎脱衙。?錯(cuò) ?，none了一時(shí)爽例驹，none后變textarea捐韩。
所以還是換種方式吧，也是用css鹃锈，但是我們這樣搞：（截圖中的代碼請(qǐng)?jiān)谧钕路綇?fù)制）寫在App.vue這個(gè)組件中的style下荤胁。style不要加scoped
上面的空白怎么辦呢，也是用css解決屎债，廢話不多說仅政，看代碼：
然后，光標(biāo)上去了盆驹，也可以在上方輸入文字了圆丹。但是提示文字沒上來，請(qǐng)繼續(xù)看下方解決方案躯喇，自然也是用css辫封。
在然后，你會(huì)發(fā)現(xiàn)都正常了玖瘸，看著真心舒服秸讹。
本教程到此結(jié)束檀咙。??代碼貼下面雅倒，方便大家復(fù)制。
.fr-wrapper > div[style*="z-index: 9999"] {
? position: absolute;
? top: -10000px;
? opacity: 0;
}
.fr-element.fr-view {
? position: absolute;
? top: 0;
}
.fr-placeholder{
? margin-top: 0 !important;
}
//下面這段代碼是封裝好的上面提到的editor.vue組件弧可，直接復(fù)制過去蔑匣，然后格式化代碼即可。xxxxx換成你自己都接口地址
<template> <froala :config="config"></froala></template><script>export default { data() { return { editor: null, config: { zIndex: 2501, height: "600", toolbarSticky: false, autofocus: true, toolbarButtons: [ "fullscreen", "bold", "italic", "underline", "strikeThrough", "subscript", "superscript", "|", "fontFamily", "fontSize", "color", "inlineClass", "inlineStyle", "paragraphStyle", "lineHeight", "|", "paragraphFormat", "align", "formatOL", "formatUL", "outdent", "indent", "quote",? "-", "insertLink", "insertImage", "insertVideo", "embedly", "insertFile", "insertTable", "|", "emoticons", "fontAwesome", "specialCharacters", "insertHR", "selectAll", "clearFormatting", "|", "print", "getPDF", "spellChecker", "help", "html", "|", "undo", "redo" ],? placeholder: '請(qǐng)?zhí)顚憙?nèi)容', language: "zh_cn", imageDefaultWidth: 500,? imageUploadURL: "xxxxxxxx", videoUploadURL: "xxxxxxx", fileUploadURL: "xxxxxxx", imageManagerLoadURL:"xxxxxx",? requestHeaders: { Authorization: localStorage.eleToken }, events: {? "froalaEditor.initialized": (e, editor) => { this.editor = editor; },? "froalaEditor.contentChanged": (e, editor) => { this.$emit("on-change", editor.html.get(true)); }, } } }; }, methods: { setHtml(html) { if (this.editor) { this.editor.html.set(html); } } }};</script><style></style>
<Editor ref="froalaEditor" @on-change="changeContent" v-model="formData.content"></Editor>
import Editor from '@/components/editor.vue'
components: { Editor },
@open="init()"
init () {
? ? ? ? this.$nextTick(()=>{
? ? ? ? console.log(this.formData.content)
? ? ? ? this.$refs.froalaEditor.setHtml(this.formData.content)
? ? ? ? })
? ? },
? ? changeContent (html) {
? ? ? this.formData.content = html
? ? ? // console.log(html)
? ? },
//-------------------- 富文本編輯配置區(qū) --------------------------------------------------//
import jQuery from 'jquery'
import VueFroala from 'vue-froala-wysiwyg'
// Require Froala Editor js file.
require('froala-editor/js/froala_editor.pkgd.min')
// Require Froala Editor css files.
require('froala-editor/css/froala_editor.pkgd.min.css')
require('font-awesome/css/font-awesome.css')
require('froala-editor/js/languages/zh_cn')
require('froala-editor/css/froala_style.min.css')
window.$ = jQuery
Vue.use(VueFroala)
//------------------------------------ 富文本編輯配置區(qū) -----------------------------------//
