在前端開(kāi)發(fā)的項(xiàng)目中，難免會(huì)遇到需要在頁(yè)面上集成一個(gè)富文本編輯器。那么，如果你有這個(gè)需求，希望可以幫助到你。

vue是前端開(kāi)發(fā)者所追捧的框架，簡(jiǎn)單易上手，但是基于vue的富文本編輯器大多數(shù)太過(guò)于精簡(jiǎn)。于是我將百度富文本編輯器放到vue項(xiàng)目中使用。效果圖如下

廢話不多說(shuō)。

1、使用vue-cli構(gòu)建一個(gè)vue項(xiàng)目。然后下載UEditor源碼，地址

把項(xiàng)目復(fù)制到vue項(xiàng)目的static文件下。目的是讓服務(wù)可以訪問(wèn)到里面的文件，打開(kāi)UEditor目錄文件。這里下載的是jsp版本的。文件名字沒(méi)有更改過(guò)。打開(kāi)里面的ueditor.config.js文件找到serverUrl把這行代碼注釋了。這個(gè)代碼是用來(lái)上傳圖片的后臺(tái)地址。如果不注釋了會(huì)請(qǐng)求報(bào)錯(cuò)。編輯器跑起來(lái)再做服務(wù)配置修改地址。

2、在.vue文件中引入主要js文件

import ‘../../static/utf8-jsp/ueditor.config'

import ‘../../static/utf8-jsp/ueditor.all';

import ‘../../static/utf8-jsp/lang/zh-cn/zh-cn';

3、在data中申明一個(gè)變量存儲(chǔ)UEditor的實(shí)例方便在vue的其他地方使用，然后申明一個(gè)變量存儲(chǔ)手動(dòng)獲取的編輯器里面的內(nèi)容，再什么一個(gè)變量存儲(chǔ)初始化時(shí)要寫(xiě)入編輯器的內(nèi)容。三個(gè)變量。如果操作得當(dāng)。可以減少變量的時(shí)候。這是笨辦法

4、在vue的mounted鉤子函數(shù)中調(diào)用編輯器的方法生成實(shí)例存儲(chǔ)到剛剛申明的變量中，在實(shí)例中傳入?yún)?shù)。第一個(gè)是id，id是生成編輯器的div的id。第二個(gè)參數(shù)是一個(gè)對(duì)象。對(duì)象內(nèi)容是對(duì)編輯器的配置。如資源訪問(wèn)路徑，toolbars內(nèi)容配置。

5、在html部分寫(xiě)一個(gè)div標(biāo)簽

6、然后配置資源路徑。在實(shí)例化的時(shí)候傳入的參數(shù)里。第二個(gè)參數(shù)是一個(gè)對(duì)象。內(nèi)容包括路徑。

this.ue = UE.getEditor('editor',{

BaseUrl: '',

UEDITOR_HOME_URL: 'static/utf8-jsp/',

});

這個(gè)UEDITOR_HOME_URL就是配置編輯器自己訪問(wèn)自己所需要的依賴的路徑。設(shè)置到存放的文件下utf8-jsp是編輯器文件的更目錄。目錄不一樣可自行更改

7、然后保存。就可以在界面上顯示一個(gè)完整的富文本編輯器

8、如果要獲取內(nèi)容則使用在data里面申明的編輯器實(shí)例在vue中this.實(shí)例調(diào)用方法getContent()可以獲取到內(nèi)容

9如果要設(shè)置內(nèi)容則調(diào)用：setContent('歡迎使用ueditor');

更多方法參考官方文檔。

10、文檔內(nèi)容屬于個(gè)人踩坑的心得。如有錯(cuò)誤。請(qǐng)留言指出。謝謝

11、需要注意的是資源路徑容易搞錯(cuò)。使用相對(duì)路徑即可

12、貼出代碼

html

保存

寫(xiě)入

js

import '../../static/utf8-jsp/ueditor.config'

import '../../static/utf8-jsp/ueditor.all';

import '../../static/utf8-jsp/lang/zh-cn/zh-cn';

export default {

name: 'hello',

data () {

return {

ue: '',

uedata: [],

xierudata: []

}

},

mounted() {

this.ue = UE.getEditor('editor',{

BaseUrl: '',

UEDITOR_HOME_URL: 'static/utf8-jsp/',

// toolbars:[]

});

},

methods: {

submits(){

this.uedata.push(UE.getEditor('editor').getContent());

console.log(this.uedata.join("n"));

},

xieru(){

UE.getEditor('editor').setContent('歡迎使用ueditor');

}

}

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。