Vue 中使用富文本編譯器wangEditor3的方法
富文本編譯器在vue中的使用
在開(kāi)發(fā)的過(guò)程中由于某些特殊需求,被我們使用,今天我就簡(jiǎn)單講一講如何在vue中使用wangEditor3
首先講一下簡(jiǎn)單的使用。
1、使用npm安裝
npm install wangeditor --save
2、vue頁(yè)面代碼如下
<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、常見(jiàn)報(bào)錯(cuò)
(1)Error in mounted hook: "HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."found in
錯(cuò)誤原因:當(dāng)我們把該組件B引入另一組件A中,A中也使用了文本編譯器,當(dāng)new Vue的時(shí)候id名重復(fù)就會(huì)造成該錯(cuò)誤,所以只需要換一個(gè)id號(hào)就可以了。
(2)文本框編輯處不能使用復(fù)制黏貼功能
原因父元素設(shè)置了contenteditable="fase"
屬性,改為true或者去掉都可以
(3)可以使用復(fù)制黏貼功能時(shí),通過(guò)F12打開(kāi)控制臺(tái),可以看到復(fù)制黏貼之后在容器內(nèi)會(huì)生成多個(gè)span標(biāo)簽,這樣通過(guò)button取的內(nèi)容很冗余;
原因:子元素的背景和父元素背景不一致
方法:將父元素其他的子元素移除,讓子父元素背景一致
(4) input標(biāo)簽內(nèi)部不能使用富文本編譯框的菜單
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法
作為一個(gè)前端新手,項(xiàng)目中遇到權(quán)限處理時(shí),通常會(huì)采用動(dòng)態(tài)添加路由的方法來(lái)實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)路由刷新失效以及404頁(yè)面處理辦法的相關(guān)資料,需要的朋友可以參考下2023-11-11解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題
這篇文章主要介紹了解決VueCil代理本地proxytable無(wú)效報(bào)錯(cuò)404的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁(yè)指令的示例代碼
vue中監(jiān)控滾動(dòng)事件可以直接在mounted中綁定滾動(dòng)事件,然后在銷(xiāo)毀前解綁滾動(dòng)事件,本文通過(guò)實(shí)例代碼介紹vue實(shí)現(xiàn)滾動(dòng)底部加載下一頁(yè)指令的過(guò)程,感興趣的朋友跟隨小編一起看看吧2023-10-10element-ui樹(shù)形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹(shù)的工具類(lèi)
這篇文章主要介紹了element-ui樹(shù)形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹(shù)的工具類(lèi),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03Vue學(xué)習(xí)之a(chǎn)xios的使用方法實(shí)例分析
這篇文章主要介紹了Vue學(xué)習(xí)之a(chǎn)xios的使用方法,結(jié)合實(shí)例形式分析了vue.js axios庫(kù)的功能及網(wǎng)絡(luò)請(qǐng)求相關(guān)操作技巧,需要的朋友可以參考下2020-01-01Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解
本文主要介紹了Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07