wangEditor富文本编辑器

84 阅读 0 评论 56 点赞

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

https://github.com/wangeditor-team/wangEditor

1.引入wangEditor的JS文件，代码如下所示：

复制代码

1
<script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>

2. 创建富文本编辑框 DOM

复制代码

1
<div id="wangEditor"></div>

3. 初始化 wangEditor 对象

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
// 初始化富文本编辑器 start
const E = window.wangEditor;
const editorD = new E("#wangEditor");
// 设置编辑区域高度为 640px
editorD.config.height = 640;
// 配置服务端图片上传地址
editorD.config.uploadImgServer = "/uploadFiles";
editorD.config.uploadFileName = "files";
// 限制图片大小 2M
editorD.config.uploadImgMaxSize = 2 * 1024 * 1024;
// 限制一次最多能传几张图片 一次最多上传 5 个图片
editorD.config.uploadImgMaxLength = 5;
// 隐藏插入网络图片的功能
editorD.config.showLinkImg = false;
editorD.create();
</script>