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();

　　获取到的内容：这是初始化的内容   （纯文本）

 

 

 

注:简简单单