欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue集成百度UEditor富文本編輯器使用教程

 更新時間:2018年09月21日 15:23:30   投稿:lijiao  
這篇文章主要為大家詳細介紹了vue集成百度UEditor富文本編輯器的使用教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

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

廢話不多說。

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

把項目復制到vue項目的static文件下。目的是讓服務(wù)可以訪問到里面的文件,打開UEditor目錄文件。這里下載的是jsp版本的。文件名字沒有更改過。打開里面的ueditor.config.js文件找到serverUrl把這行代碼注釋了。這個代碼是用來上傳圖片的后臺地址。如果不注釋了會請求報錯。編輯器跑起來再做服務(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中申明一個變量存儲UEditor的實例方便在vue的其他地方使用,然后申明一個變量存儲手動獲取的編輯器里面的內(nèi)容,再什么一個變量存儲初始化時要寫入編輯器的內(nèi)容。三個變量。如果操作得當??梢詼p少變量的時候。這是笨辦法

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

5、在html部分寫一個div標簽

<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>

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

this.ue = UE.getEditor('editor',{ 
BaseUrl: '', 
UEDITOR_HOME_URL: 'static/utf8-jsp/', 
}); 

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

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

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

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

更多方法參考官方文檔。

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

11、需要注意的是資源路徑容易搞錯。使用相對路徑即可

12、貼出代碼

html

<template> 
<div class="hello"> 
<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div> 
<button @click="submits">保存</button> 
<button @click="xieru">寫入</button> 
</div> 
</template> 

js

<script> 
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'); 
} 
} 
} 
</script> 

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3中關(guān)于路由hash與History的設(shè)置

    vue3中關(guān)于路由hash與History的設(shè)置

    這篇文章主要介紹了vue3中關(guān)于路由hash與History的設(shè)置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue3 el-table 如何通過深度選擇器::v-deep修改組件內(nèi)部樣式(默認樣式)

    vue3 el-table 如何通過深度選擇器::v-deep修改組件內(nèi)部樣式(默認樣式)

    在Vue3中,通過使用深度選擇器::v-deep可以有效修改element-plus中el-table組件的內(nèi)部樣式,這種方法允許開發(fā)者覆蓋默認的樣式,實現(xiàn)自定義的視覺效果,本文給大家介紹vue3 el-table 通過深度選擇器::v-deep修改組件內(nèi)部樣式,感興趣的朋友一起看看吧
    2024-10-10
  • Vue?項目性能優(yōu)化方案分享

    Vue?項目性能優(yōu)化方案分享

    本文是作者通過實際項目的優(yōu)化實踐進行總結(jié)而來,希望讀者讀完本文,有一定的啟發(fā)思考,從而對自己的項目進行優(yōu)化起到幫助
    2022-08-08
  • Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))

    Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié))

    本文主要介紹了Vue腳手架配置代理服務(wù)器的兩種方式(小結(jié)),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-01-01
  • rem實現(xiàn)響應式布局的思路詳解

    rem實現(xiàn)響應式布局的思路詳解

    這篇文章主要為大家介紹了rem實現(xiàn)響應式布局的思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • vue實現(xiàn)簡單的跑馬燈效果

    vue實現(xiàn)簡單的跑馬燈效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的跑馬燈效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vue實現(xiàn)驗證碼登錄的方法實例

    Vue實現(xiàn)驗證碼登錄的方法實例

    最近在自己寫頁面,然后寫登錄注冊UI的時候需要一個驗證碼組件,去搜一下沒找到什么合適的,于是自己寫一個,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)驗證碼登錄的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • vue使用urlEncode問題

    vue使用urlEncode問題

    這篇文章主要介紹了vue使用urlEncode問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

    Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

    這篇文章主要為大家介紹了Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • 說說Vue.js中的functional函數(shù)化組件的使用

    說說Vue.js中的functional函數(shù)化組件的使用

    這篇文章主要介紹了說說Vue.js中的functional函數(shù)化組件的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02

最新評論