wangEditor 富文本编辑器

93 阅读 0 评论 62 点赞

我是靠谱客的博主醉熏外套，这篇文章主要介绍wangEditor 富文本编辑器，现在分享给大家，希望可以做个参考。

在vue中引入

复制代码

1
import E from "wangeditor";

正常引入

var E=window.wangEditor

定义

复制代码

1
var editor = new E("#left");

创建

复制代码

1
editor.create();

复制代码

1
2
3
4
5
6
7
8
 //当编辑器 改变时 记录其
内容！！

editor.customConfig.onchange =（） => {

//处理回调函数

};

想要在光标处插入内容时

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 $$(".aslide .noclass-l .right").on("click", "button", function() {

//获取光标位置
let
range = window.getSelection().getRangeAt(0);

//新建标签及内容

let newSpan=document.createElement("span");

newSpan.style.color = '#000';

newSpan.style.background = 'gray';

newSpan.style.padding = '5px 10px';

newSpan.setAttribute("data-item",$$.trim($$(this).html()) );
 

newSpan.appendChild(document.createTextNode("【"+$$.trim($$(this).html())+"】"));
//插到光标处

range.insertNode(newSpan);

});