Vue 中使用富文本編譯器wangEditor3的方法
更新時間：2019年09月26日 14:12:57 作者：emyliapei
這篇文章主要介紹了Vue 中使用富文本編譯器wangEditor3的方法，文中通過示例代碼介紹的非常詳細，對大家的學(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
錯誤原因：當我們把該組件B引入另一組件A中，A中也使用了文本編譯器，當new Vue的時候id名重復(fù)就會造成該錯誤，所以只需要換一個id號就可以了。
（2）文本框編輯處不能使用復(fù)制黏貼功能
原因父元素設(shè)置了contenteditable="fase"屬性，改為true或者去掉都可以
（3）可以使用復(fù)制黏貼功能時，通過F12打開控制臺，可以看到復(fù)制黏貼之后在容器內(nèi)會生成多個span標簽，這樣通過button取的內(nèi)容很冗余；
原因：子元素的背景和父元素背景不一致
方法：將父元素其他的子元素移除，讓子父元素背景一致
（4） input標簽內(nèi)部不能使用富文本編譯框的菜單
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
淺談Vue網(wǎng)絡(luò)請求之interceptors實際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請求之interceptors實際應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了在Vue中使用highCharts繪制3d餅圖的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12
本篇文章主要介紹了vue 計時器組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue+electron 自動更新的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
這篇文章主要為大家詳細介紹了vue3實現(xiàn)移動端滑動模塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了iView框架問題整理小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了vue中van-picker的選項插槽的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
在日常開發(fā)中,經(jīng)常遇到需要支持列表循環(huán)滾動展示,特別是在數(shù)據(jù)化大屏開發(fā)中,所以小編今天為大家介紹一下如何利用vue3實現(xiàn)一個無縫滾動組件吧2023-09-09