首页 > 其他 > 详细

vue 中的富文本编辑器

时间:2021-01-04 14:39:27      阅读:21      评论:0      收藏:0      [点我收藏+]

富文本编辑在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, "编辑器对象");
    },

 

vue 中的富文本编辑器

原文:https://www.cnblogs.com/2587jsq/p/14229052.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!