先上成品圖
????????????代碼貼在最下面，方便大家復(fù)制。????????????
補(bǔ)充：記得 把 富文本編輯器的版本改成2.9.0，否則工具欄會顯示不全。 直接按照版本安裝 cnpm install vue-froala-wysiwyg@2.9.0? --save? 就不會出現(xiàn)補(bǔ)充中的問題了
然后在main.js內(nèi)，window.$ = jQuery 下面 在加上一句?window.jQuery = jQuery 就可以了?
一開始用的時(shí)候會出現(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í)間我會寫一篇教程上傳到簡書，敬請期待。
這個(gè)是ueditor編輯器，第二個(gè)是froala
froala-editor富文本編輯器介紹：
WYSIWYG HTML編輯器是一款有史以來最強(qiáng)大的JavaScript富文本編輯器之一。它采用了最新的技術(shù)，并利用jQuery和HTML5的巨大優(yōu)勢，創(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)目，哦對了，主要是這個(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的話請自行測試，有時(shí)間了小編會把3.0使用教程上傳上來。
初始化編輯器
Froala WYSIWYG HTML編輯器是一個(gè)易于集成和易于使用的插件。它需要jQuery1.11.0或更高版本，以及名為Font Awesome4.4.0的圖標(biāo)字體。你也可以使用舊版本的Font Awesome，但是某些編輯器的圖標(biāo)將不會出現(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è)要是還不會的話，建議先去學(xué)習(xí)下vue基礎(chǔ)
2）這里要注意下調(diào)用子組件的方法引發(fā)的問題，詳細(xì)情況請查看我另一篇博文（前端踩坑小結(jié):當(dāng)element-ui的el-dialog組件中包含子組件時(shí)，用refs調(diào)用子組件時(shí)的undefined問題）
ps：我的項(xiàng)目是做的后臺管理，需要用到編輯器添加，編輯圖文，這里用到了vue指令v-model雙向綁定，很是方便。formData數(shù)據(jù)是該組件的父組件傳過來的，沒有這個(gè)數(shù)據(jù)的話自己在data里聲明一個(gè)。前端的話到這里就結(jié)束了，圖片上傳，視頻上傳的接口找你們公司后端要就行，填在我打馬賽克的那幾個(gè)地方就可以了。不說了，我去飛了。哈哈??
ps：正式打包上線的時(shí)候，可能有些問題，比如會出現(xiàn)圖標(biāo)字體找不到等等，有時(shí)間我會把問題的解決方案更新上來，敬請關(guān)注
更新：
打包上線后會出現(xiàn)以下幾個(gè)問題：
1）.woff等圖標(biāo)字體找不到，導(dǎo)致下圖這個(gè)情況～
分析：
仔細(xì)檢查控制臺報(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)控制臺不報(bào)錯(cuò)了，圖標(biāo)字體頁找到了，界面頁正常了，（腰也不痛了，腎也好了，一晚上又可以好幾次了，哈哈哈??）可是～～怎么會出現(xiàn)紅色背景警告一樣的英文呢，什么鬼～
這就是第二個(gè)問題，froala編輯器其實(shí)是收費(fèi)的，但是我們可以免費(fèi)使用他（什么亂七八糟的，就是干）別急，看看怎么解決他個(gè)狗日的。
你可能會想到，用css的display：none隱藏掉不就可以了嗎。?錯(cuò) ?，none了一時(shí)爽，none后變textarea。
所以還是換種方式吧，也是用css，但是我們這樣搞：（截圖中的代碼請?jiān)谧钕路綇?fù)制）寫在App.vue這個(gè)組件中的style下。style不要加scoped
上面的空白怎么辦呢，也是用css解決，廢話不多說，看代碼：
然后，光標(biāo)上去了，也可以在上方輸入文字了。但是提示文字沒上來，請繼續(xù)看下方解決方案，自然也是用css。
在然后，你會發(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: '請?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ū) -----------------------------------//
