Wangeditor-shadow NPM

wangEditor

与官方相比改动

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

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)

支持 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 版本看这里。

Product Screen Shot

安装和使用

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>