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

發(fā)布時(shí)間：2020-09-15 08:10:04 來源：腳本之家閱讀：1213 作者：emyliapei 欄目：web開發(fā)

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

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

首先講一下簡(jiǎn)單的使用。

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)效果如下

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

4、常見報(bào)錯(cuò)

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

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

錯(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í)，通過F12打開控制臺(tái)，可以看到復(fù)制黏貼之后在容器內(nèi)會(huì)生成多個(gè)span標(biāo)簽，這樣通過button取的內(nèi)容很冗余；
原因：子元素的背景和父元素背景不一致
方法：將父元素其他的子元素移除，讓子父元素背景一致

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽