wangEditor

与官方相比改动

1. 将样式独立，使用时需要单独引入样式

import E from "wangeditor-shadow";
import "wangeditor-shadow/dist/index.min.css";

也可获取 style 字符串，自己手动插入到 dom：

import E from "wangeditor-shadow";
import content from "wangeditor-shadow/dist/style.min.js";

const style = document.createElement('style')
style.innerHTML = content
document.head.appendChild(style)

2. 支持 ShadowDom

import E from "wangeditor-shadow";
import content from "wangeditor-shadow/dist/style.min.js";

const shadowDom = document.getElementById('yourEl').attachShadow({ mode: 'open' })
const div = document.createElement('div')
shadowDom.appendChild(div)

const styleEl = document.createElement('style')
styleEl.innerHTML = content
document.head.appendChild(styleEl) // 将样式注入到 document.head ，用于加载图标字体
shadowDom.appendChild(styleEl.cloneNode(true)) // shadowDom 中加载样式

const editor = new E(div)
editor.shadowDom = shadowDom // 设置 shadowDom
editor.create()

项目介绍

wangEditor 是一款使用 Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费。

兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。

不支持移动端。

当前是 v4 版本。想继续使用 v3 版本看这里。

安装和使用

NPM

npm i wangeditor-shadow --save

安装后几行代码即可创建一个编辑器：

import E from "wangeditor";
const editor = new E("#div1");
editor.create();

CDN

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
  const E = window.wangEditor
  const editor = new E('#div1')
  // 或者 const editor = new E(document.getElementById('div1'))
  editor.create()
</script>

贡献

贡献使得开源社区成为一个学习、激励和创造的好地方，非常感谢你所做的任何贡献。在贡献 wangEditor 之前，你需要阅读文档 contribution。

许可证

项目在 MIT 的许可证下发布， 查看更多 MIT 许可证信息。

交流

加入 QQ 群

• 164999061（人已满）
• 710646022（人已满）
• 901247714（人已满）
• 606602511

提交 bug 或建议

• github issues 提交问题

开发团队

有专业开发团队维护，非个人单兵作战。

想加入 wangEditor 研发团队，可申请加入 QQ 群，然后私聊群主。

为我们加油

你的支持，将激励我们输出更多优质内容！