嘗試過tinymce和vue-quill-editor，感覺雖然較百度富文本輕量一些，但是還要后端額外寫個(gè)上傳圖片的接口，對(duì)上傳附件和上傳本地視頻也不太友好，還是選擇了百度富文本編輯器——ueditor
在官網(wǎng)下載，最新版就可以，自己選擇適合的版本，我選的是php的。

包放在碼云了 （無bug的php版本）

第一步

ueditor 文件夾放在vue項(xiàng)目的 /public/static/ 文件夾下
server-ueditor 文件夾放在 服務(wù)器上，配置好域名

第二步

server-ueditor/config.json前綴都換成配置好的那個(gè)域名

server-ueditor/config.json

第三步

然后，在瀏覽器上訪問：域名/controller.php，如果返回了這樣的，說明配置成功了。

image.png

第四步

// 安裝插件 vue-ueditor-wrap
npm install vue-ueditor-wrap -S

// 在main.js中
// ueditor 編輯器（全局組件）
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

// 在頁(yè)面中
</template>
  <vue-ueditor-wrap v-model="text" :config="myConfig" />
</template>
<script>
export default {
  name: 'editor',
  data () {
    return {
      text: "",
      myConfig: {
        // 編輯器不自動(dòng)被內(nèi)容撐高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器寬度
        initialFrameWidth: '80%',
        // 上傳文件接口（這個(gè)地址是我為了方便各位體驗(yàn)文件上傳功能搭建的臨時(shí)接口，請(qǐng)勿在生產(chǎn)環(huán)境使用?。。。?        serverUrl: '域名/controller.php', 
        // UEditor 資源文件的存放路徑，如果你使用的是 vue-cli 生成的項(xiàng)目，通常不需要設(shè)置該選項(xiàng)，vue-ueditor-wrap 會(huì)自動(dòng)處理常見的情況，如果需要特殊配置，參考下方的常見問題2
        UEDITOR_HOME_URL: './static/UEditor/'
      }
    }
  }
}
</script>

完成

可以正常使用了，
如果上傳圖片錯(cuò)誤，看一下服務(wù)器上保存圖片的那幾個(gè)文件夾權(quán)限有沒有寫入權(quán)限，
如果報(bào)錯(cuò)跨域","，看nginx是不是設(shè)置了跨域了，和controller.php中設(shè)置的跨域重復(fù)了。去掉其中一個(gè)就可以了。

header("Content-Type: text/html; charset=utf-8");
header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //設(shè)置允許的跨域header
header('Access-Control-Allow-Origin:*');