vue整合百度富文字編輯器
阿新 • • 發佈：2019-07-12
1.前期工作，訪問百度富文字官網下載相應的百度富文字檔案，根據後端用的技術下載相應的版本，建議下載最新版UTF-8版 （有圖有真相，看圖）
https://ueditor.baidu.com/website/download.html
2.將下載好的檔案解壓，存放在專案位置下：
>1.如果是在vue腳手架中整合百度富文字框，則將解壓後選取部分檔案新建資料夾UE，放在其下面，之後放在與index.html平行下的地方如圖所示：
>2.如果是在vue-element-admin或者iview-admin中整合百度富文字框，則將解壓後選取部分檔案新建資料夾UE，放在其下面，之後放在與index.html平行下的地方，需要新建資料夾static 如圖所示：
注意的點：有人會問為什麼，不放在src的下面，非要和index.html平級？
值得說的是你不知道，後面操作上傳圖片等上傳按鈕的時候，載入的是UE下html檔案，vue框架只有一個index.html模板，其他都是路由載入模組，放在src的下面程式碼經 過壓縮後，上傳後再次嵌入整個框架，也就是index.html模板。所以放在與index.html平級下，點選富文字上傳等功能時候，就會單個載入UE下html檔案，也不會報已下 錯誤：
codemirror.js:1 Uncaught SyntaxError: Unexpected token <
ueditor.all.min.js:11 Uncaught ReferenceError: ZeroClipboard is not defined
at a (ueditor.all.min.js:11)
at ueditor.all.min.js:11
at HTMLScriptElement.i.onload.i.onreadystatechange (ueditor.all.min.js:7)
3.修改UE下ueditor.config.js中的路徑
4.在專案main.js中引入UE下的js
import '../public/static/UE/ueditor.config.js' import '../public/static/UE/ueditor.all.min.js' import '../public/static/UE/lang/zh-cn/zh-cn.js' import '../public/static/UE/ueditor.parse.js' 可引入，也可不引入 import '../public/static/UE/themes/default/css/ueditor.css' 樣式必須引入 5.編寫百度百度富文字vue的元件，位置任一放 <template> <div> <script :id="id" type="text/plain"></script> </div> </template> <script> export default { name: "UE", data() { return { editor: null }; }, props: { defaultMsg: { type: String }, config: { type: Object }, id: { type: String } }, mounted() { const _this = this; this.editor = window.UE.getEditor(this.id, this.config); // 初始化UE this.editor.addListener("ready", function() { _this.editor.setContent(_this.defaultMsg); // 確保UE載入完成後，放入內容。 }); console.log("上傳這堆錯誤不用理會，上傳介面需自行開發配置"); }, methods: { getUEContent() { // 獲取內容方法 return this.editor.getContent(); }, getUEContentTxt() { // 獲取純文字內容方法 return this.editor.getContentTxt(); } }, destroyed() { this.editor.destroy(); } }; </script>6.在模組中使用，剛封裝好的百度富文字編輯器.vue元件,引入路徑看你存放元件的位置，註冊後使用 <template> <div class="components-container"> <div class="info"> UE編輯器示例 <br />需要使用編輯器時，呼叫UE公共元件即可。可設定填充內容defaultMsg，配置資訊config(寬度和高度等)，可呼叫元件中獲取內容的方法。支援頁面內多次呼叫。 </div> <button @click="getUEContent()">獲取內容</button> <button @click="getUEContentTxt()">獲取無文字內容</button> <div class="editor-container"> <UE :defaultMsg="defaultMsg" :config="config" :id="ue1" ref="ue"></UE> <UE :defaultMsg="defaultMsg" :config="config" :id="ue2" ref="ue2"></UE> </div> </div> </template> <style> .info { border-radius: 10px; line-height: 20px; padding: 10px; margin: 10px; background-color: #ffffff; } </style> <script> import UE from "../../components/ueditor.vue"; export default { components: { UE }, data() { return { defaultMsg: '<span style="orphans: 2; widows: 2; font-size: 22px; font-family: KaiTi_GB2312; "><strong>夏鈞姍：成功的投資需具備哪些心態和掌握哪些重要止損位</strong></span>', config: { initialFrameWidth: null, initialFrameHeight: 350 }, ue1: "ue1", // 不同編輯器必須不同的id ue2: "ue2" }; }, methods: { getUEContent() { let content = this.$refs.ue.getUEContent(); // 呼叫子元件方法 this.$notify({ title: "獲取成功，可在控制檯檢視！", message: content, type: "success" }); console.log(content); }, getUEContentTxt() { let content = this.$refs.ue.getUEContentTxt(); // 呼叫子元件方法 this.$notify({ title: "獲取成功，可在控制檯檢視！", message: content, type: "success" }); console.log(content); } } }; </script> 7.執行專案效果如圖：
8.會出現這樣的報錯，是由於後端無配置介面請求，後續完善
覺得不錯就關注點贊，歡迎評論不足之處，後期上傳GitHub案例
&n