VUE中富文本編輯器的使用(wangEditor)

一，安裝wangEditor

　　npm命令安裝：  npm i wangeditor --save

 

二，使用

　　在需要使用富文本編輯器的地方寫入

<div id="div1">
      <p>這是初始化的內容</p>
</div>

　　創建富文本編輯器

<!-- 引入 wangEditor.min.js -->
<script>
import E from "wangeditor";
export default {
  data() {
    return {
      texttxt: "",
    };
  },
  //一定要寫在mounted中
  mounted: function () {
    const editor = new E("#div1");
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
    };
    //創建   --創建之后可以重新初始化內容:editor.txt.html('初始化')
    editor.create();

    this.texttxt = editor;
  }
};
</script>

　　

三，獲取富文本編輯器的內容

　　this.texttxt是自己定義的不要介意

　　1， this.texttxt.txt.html();   

　　獲取到的內容：<p>這是初始化的內容</p>   （html）

 

　　2， this.texttxt.txt.text();

　　獲取到的內容：這是初始化的內容   （純文本）

 

 

 

注:簡簡單單