最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue中使用ueditor富文本編輯器

 更新時間:2018年02月08日 15:42:04   作者:LGW0  
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關資料,需要的朋友可以參考下

最近在做后臺管理系統(tǒng)的時候遇到要使用富文本編輯器。最后選擇了ueditor,我的項目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建,

 1、下載UEditor官網(wǎng)最新的jsp版本的包,下載完成解壓之后得到一個utf8-jsp的文件夾,里面包含的內(nèi)容如下:

2、將這個文件夾改名為ueditor,并且移入自己項目中的static文件夾下,修改ueditor.config.js文件夾中的內(nèi)容,如下圖:

3、編寫子組件

<template>
 <div :id="id" type="text/plain"></div>
</template>
<script>
 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'
 export default {
 name: 'UE',
 data() {
 return {
 editor: null
 }
 },
 props: {
 defaultMsg: {
 type: String,
 default: '請輸入內(nèi)容'
 },
 config: {
 type: Object
 },
 id: {
 type: String,
 default: `ue${Math.random(0, 100)}`
 }
 },
 mounted() {
 this.$nextTick(() => {
 this.editor = UE.getEditor(this.id, this.config); // 初始化UE
 this.editor.addListener("ready", () => {
  this.editor.execCommand('insertHtml', this.defaultMsg);
  this.editor.focus() // 確保UE加載完成后,放入內(nèi)容。
 })
 })
 },
 methods: {
 getUEContent() { // 獲取內(nèi)容方法
 return this.editor.getContent()
 },
 clearContent() { // 清空編輯器內(nèi)容
 return this.editor.execCommand('cleardoc');
 },
 },
 beforeDestroy() {
 // 組件銷毀的時候,要銷毀 UEditor 實例
 if (this.editor !== null && this.editor.destroy) {
 this.editor.destroy();
 }
 }
 }
</script>
<style scoped></style>

4、在父組件中使用

<UE :config="configEditor" :id="ue1" ref="ue" :defaultMsg="val"></UE>

5、弄好之后,上傳圖片會提示后端配置項http錯誤,文件上傳會提示上傳錯誤。這里提別申明一點,ueditor在前端配置好后,需要與后端部分配合進行,然后將配置ueditor.config.js 里的serverUrl的前綴改陳你自己的后端訪問的請求路徑地址

serverUrl: "統(tǒng)一請求地址"

總結(jié)

以上所述是小編給大家介紹的vue中使用ueditor富文本編輯器,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • 基于Vuejs和Element的注冊插件的編寫方法

    基于Vuejs和Element的注冊插件的編寫方法

    這篇文章主要介紹了基于Vuejs和Element的注冊插件的編寫方法,需要的朋友可以參考下
    2017-07-07
  • Vue中的v-model,v-bind,v-on的區(qū)別解析

    Vue中的v-model,v-bind,v-on的區(qū)別解析

    vue.js是一套構(gòu)建用戶界面的框架,只關注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合,vue.js有配套的第三方類庫,可以整合起來做大型項目的開發(fā),這篇文章主要介紹了v-model,v-bind,v-on的區(qū)別,需要的朋友可以參考下
    2022-12-12
  • Vue之beforeEach非登錄不能訪問的實現(xiàn)(代碼親測)

    Vue之beforeEach非登錄不能訪問的實現(xiàn)(代碼親測)

    這篇文章主要介紹了Vue之beforeEach非登錄不能訪問的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-07-07
  • Vue基礎popover彈出框編寫及bug問題分析

    Vue基礎popover彈出框編寫及bug問題分析

    這篇文章主要為大家介紹了Vue基礎popover彈出框編寫及bug問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • 在vue中寫jsx的幾種方式

    在vue中寫jsx的幾種方式

    本文主要介紹了在vue中寫jsx的幾種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF

    vue使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF

    這篇文章主要為大家詳細介紹了vue如何使用html2canvas實現(xiàn)將DOM節(jié)點生成對應的PDF,文中的示例代碼簡潔易懂,感興趣的小伙伴可以學習一下
    2023-08-08
  • vue使用高德地圖實現(xiàn)實時定位天氣預報功能

    vue使用高德地圖實現(xiàn)實時定位天氣預報功能

    這篇文章主要介紹了vue使用高德地圖實現(xiàn)實時天氣預報功能,根據(jù)定位功能,使用高德地圖實現(xiàn)定位當前城市的天氣預報功能,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • vue+springboot圖片上傳和顯示的示例代碼

    vue+springboot圖片上傳和顯示的示例代碼

    這篇文章主要介紹了vue+springboot圖片上傳和顯示的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-02-02
  • vue權(quán)限路由實現(xiàn)的方法示例總結(jié)

    vue權(quán)限路由實現(xiàn)的方法示例總結(jié)

    這篇文章主要給大家介紹了關于vue權(quán)限路由實現(xiàn)方法的相關資料,文中通過示例代碼介紹地方非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-07-07
  • vxe-table中vxe-grid(高級表格)的使用方法舉例

    vxe-table中vxe-grid(高級表格)的使用方法舉例

    vxe-table是一個基于vue的表格組件,下面這篇文章主要給大家介紹了關于vxe-table中vxe-grid(高級表格)的使用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-05-05

最新評論

砀山县| 盐边县| 临武县| 栾川县| 句容市| 达州市| 德昌县| 兰州市| 台江县| 德江县| 上林县| 治县。| 岳普湖县| 溧水县| 清水河县| 津南区| 玛纳斯县| 西安市| 陆丰市| 孟州市| 普宁市| 肥东县| 沧州市| 兰坪| 西和县| 尚志市| 吉木萨尔县| 安福县| 体育| 集安市| 黄大仙区| 光山县| 保德县| 项城市| 敦化市| 金塔县| 明光市| 西充县| 华阴市| 台南市| 农安县|