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

更新時間：2019年09月26日 14:12:57 作者：emyliapei

這篇文章主要介紹了Vue 中使用富文本編譯器wangEditor3的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

富文本編譯器在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();
 
 //想獲取文本編譯框內的html，可以添加事件獲取
 document.getElementById("complete").addEventListener("click", function() {
  var json = editor.txt.getJSON(); // 獲取 JSON 格式的內容
  var jsonStr = JSON.stringify(json);
  console.log(json);
  console.log(jsonStr);
 });
 }
};
</script>
<style lang="scss">
#div6 {
 height: 200px;
 background: #f1f7f9;
}
</style>

3、呈現效果如下