小編給大家分享一下vue2.x如何集成百度UEditor富文本編輯器，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

發(fā)展壯大離不開廣大客戶長(zhǎng)期以來(lái)的信賴與支持，我們將始終秉承“誠(chéng)信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠(chéng)服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及主動(dòng)防護(hù)網(wǎng)等，在重慶網(wǎng)站建設(shè)公司、全網(wǎng)營(yíng)銷推廣、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

1.首先下載UEditor源碼，將整個(gè)文件放到static文件夾中

2.然后將UEditor集成到項(xiàng)目中去。

找到src/main.js，在main.js中

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js'
import '../static/ueditor/lang/zh-cn/zh-cn.js'　　　
import '../static/ueditor/ueditor.parse.min.js'

3.在src/components文件夾下創(chuàng)建公共組件UE.vue文件，作為編輯器組件

export default {
 name:'ue',
 props:{
  value:{
   type:String,
   default:""
  }
 },
 data() {
  return {
  editor: null,
  };
 },
 mounted() {
  // 實(shí)例化editor編輯器
  this.editor = window.UE.getEditor("editor");
  //設(shè)置編輯器默認(rèn)內(nèi)容
  this.editor.addListener('ready', () => {
  this.editor.setContent(this.value)
  })
 },
  methods: {
  //獲取編輯器中的內(nèi)容
  getUEContent () {
  return this.editor.getContent()
  }
 },
 destroyed() {
  // 將editor進(jìn)行銷毀
  this.editor.destroy();
 }
}

4.我們可以通過ueditor.config.js來(lái)改變編輯器所顯示的選項(xiàng)

如果我們默認(rèn)顯示的話，會(huì)是這個(gè)樣子

如果你不需要某些元素，你可以在ueditor.config.js中的toolbars中設(shè)置需要顯示的標(biāo)簽

當(dāng)然你還需要做下其他的配置，比如指定編輯器資源文件根目錄

window.UEDITOR_HOME_URL = "./static/UE/";

在這里友情提示，如果你的項(xiàng)目打包之后不是放在一級(jí)目錄下，建議寫成這樣相對(duì)路徑，不然會(huì)報(bào)錯(cuò)找不到資源。
5.這樣你就可以在其他組件引入使用了，我們可以通過props向編輯器傳遞默認(rèn)顯示的值，還可以通過getUEContent()方法獲取編輯器輸入的內(nèi)容。但是在瀏覽器控制臺(tái)你還是會(huì)看到報(bào)錯(cuò)

后臺(tái)配置項(xiàng)返回格式出錯(cuò)，上傳功能將不能正常使用！

這是因?yàn)槲覀冊(cè)诰庉嬈髦猩蟼鲌D片或者視頻的時(shí)候，沒有配置服務(wù)器請(qǐng)求接口，在ueditor.config.js中，對(duì)serverUrl進(jìn)行配置就可以了

serverUrl: "" //這個(gè)接口地址去跟你們的后臺(tái)要就可以了

到這里，我們就可以愉快的使用UEditor富文本編輯器了。

以上是“vue2.x如何集成百度UEditor富文本編輯器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：vue2.x如何集成百度UEditor富文本編輯器-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/dgjdce.html