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

Vue 中使用富文本編譯器wangEditor3的方法

 更新時間:2019年09月26日 14:12:57   作者:emyliapei  
這篇文章主要介紹了Vue 中使用富文本編譯器wangEditor3的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

富文本編譯器在vue中的使用

在開發(fā)的過程中由于某些特殊需求,被我們使用,今天我就簡單講一講如何在vue中使用wangEditor3

首先講一下簡單的使用。

1、使用npm安裝

npm install wangeditor --save

2、vue頁面代碼如下

<template>
 <section>
 <div id="div5"></div>
 <div id="div6"></div>
 <button id='complete'></button>
 </section>
</template>
<script>
import Editor from "wangeditor";
export default {
 data() {
 return {};
 },
 mounted() {
 var editor = new Editor("#div5", "#div6");
 editor.customConfig.onchange = html => {
  console.log(editor.txt.html());
 };
 editor.create();
 
 //想獲取文本編譯框內(nèi)的html,可以添加事件獲取
 document.getElementById("complete").addEventListener("click", function() {
  var json = editor.txt.getJSON(); // 獲取 JSON 格式的內(nèi)容
  var jsonStr = JSON.stringify(json);
  console.log(json);
  console.log(jsonStr);
 });
 }
};
</script>
<style lang="scss">
#div6 {
 height: 200px;
 background: #f1f7f9;
}
</style>

3、呈現(xiàn)效果如下

4、常見報錯

(1)Error in mounted hook: "HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."found in

錯誤原因:當(dāng)我們把該組件B引入另一組件A中,A中也使用了文本編譯器,當(dāng)new Vue的時候id名重復(fù)就會造成該錯誤,所以只需要換一個id號就可以了。

(2)文本框編輯處不能使用復(fù)制黏貼功能
原因父元素設(shè)置了contenteditable="fase"屬性,改為true或者去掉都可以

(3)可以使用復(fù)制黏貼功能時,通過F12打開控制臺,可以看到復(fù)制黏貼之后在容器內(nèi)會生成多個span標(biāo)簽,這樣通過button取的內(nèi)容很冗余;
原因:子元素的背景和父元素背景不一致
方法:將父元素其他的子元素移除,讓子父元素背景一致

(4) input標(biāo)簽內(nèi)部不能使用富文本編譯框的菜單

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

相關(guān)文章

  • 教你輕松解決Vue?Dialog彈窗詬病

    教你輕松解決Vue?Dialog彈窗詬病

    彈窗經(jīng)常被使用在一些表單的增刪改查啊,或者彈出一些提示信息等等,這篇文章主要給大家介紹了關(guān)于Vue?Dialog彈窗詬病解決的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • Vue2中使用Monaco?Editor的教程詳解

    Vue2中使用Monaco?Editor的教程詳解

    Monaco-editor,一個vs?code?編輯器,這篇文章主要為大家詳細(xì)介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • webpack中的optimization配置示例詳解

    webpack中的optimization配置示例詳解

    這篇文章主要介紹了webpack中的optimization配置詳解,主要就是根據(jù)不同的策略來分割打包出來的bundle,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02
  • vue動態(tài)路由刷新失效以及404頁面處理辦法

    vue動態(tài)路由刷新失效以及404頁面處理辦法

    作為一個前端新手,項目中遇到權(quán)限處理時,通常會采用動態(tài)添加路由的方法來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)路由刷新失效以及404頁面處理辦法的相關(guān)資料,需要的朋友可以參考下
    2023-11-11
  • 解決VueCil代理本地proxytable無效報錯404的問題

    解決VueCil代理本地proxytable無效報錯404的問題

    這篇文章主要介紹了解決VueCil代理本地proxytable無效報錯404的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究

    Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究

    Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue實現(xiàn)滾動底部加載下一頁指令的示例代碼

    vue實現(xiàn)滾動底部加載下一頁指令的示例代碼

    vue中監(jiān)控滾動事件可以直接在mounted中綁定滾動事件,然后在銷毀前解綁滾動事件,本文通過實例代碼介紹vue實現(xiàn)滾動底部加載下一頁指令的過程,感興趣的朋友跟隨小編一起看看吧
    2023-10-10
  • element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類

    element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類

    這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • Vue學(xué)習(xí)之a(chǎn)xios的使用方法實例分析

    Vue學(xué)習(xí)之a(chǎn)xios的使用方法實例分析

    這篇文章主要介紹了Vue學(xué)習(xí)之a(chǎn)xios的使用方法,結(jié)合實例形式分析了vue.js axios庫的功能及網(wǎng)絡(luò)請求相關(guān)操作技巧,需要的朋友可以參考下
    2020-01-01
  • Vue3和Electron實現(xiàn)桌面端應(yīng)用詳解

    Vue3和Electron實現(xiàn)桌面端應(yīng)用詳解

    本文主要介紹了Vue3和Electron實現(xiàn)桌面端應(yīng)用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07

最新評論