vue 中的富文本编辑器

富文本编辑在vue中的使用

官网地址：

官网：http://www.wangeditor.com/
文档：http://www.wangeditor.com/doc/

下载

npm install(i) wangeditor

实例化一个富文本编辑

视图承载富文本编辑器
<div id='editor'></div>
​
import 变量 from 'wangeditor' 
​
this.data变量名 = new 变量('标签的id #editor')
this.data变量名.create()
​
//设置内容
this.data变量名.editor.txt.html(this.form.内容)
​

获取你富文本编辑器的内容

//获取
this.data变量名.editor.txt.html()

例：
视图：

  <div id="editor"></div>

逻辑：

import E from "wangeditor";

data（）{

return{

 editor: null, //定义一个编辑器变量

}}

 createEditor() {

      console.log("富文本被创建");

      //先实例化富文本

      this.editor = new E("#editor");

      //调用富文本编辑器 create方法

      this.editor.create();

      //设置内容 设置表单描述信息参数

      this.editor.txt.html(this.form.description);

      console.log(this.editor, "编辑器对象");

    },

---