wangEditor —— 轻量级web富文本框

Overview

wangEditor

Stars badge Forks badge cypress badge jest badge build badge MIT License


Logo

wangEditor

轻量级 web 富文本编辑器,配置方便,使用简单!
官网 · 文档

English · 在线示例 · 提交 bug · 建议增加新功能

体验新版本

wangEditor V5 新版本已公开测试,请查看 V5 文档

项目介绍

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

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

不支持移动端。

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

Product Screen Shot

安装和使用

NPM

npm i wangeditor --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(人已满)
  • 764778054

提交 bug 或建议

开发团队

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

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

为我们加油

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

Comments
  • 谷歌浏览器中, 当富文本中无内容时,使用中文输入法, 输入文字时,第一个拼音会被自动删除,导致拼写的文字错误

    谷歌浏览器中, 当富文本中无内容时,使用中文输入法, 输入文字时,第一个拼音会被自动删除,导致拼写的文字错误

    bug 描述

    删除富文本中的所有内容, 再次输入时,输入法在输入状态时,并未输入完成,触发了change事件。中文输入法输入时出现的问题

    你预期的样子是?

    我想输入同意(tongyi),结果变成了容易(ongyi)

    浏览器及版本号

    谷歌 版本 91.0.4472.114(正式版本) (64 位)

    wangEditor 版本

    4.7.4

    官网能否复现该 bug ?

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该 bug)

    • 步骤一 删除富文本中的所有内容, 再次输入时,输入法在输入状态时,并未输入完成,触发了change事件
    • 步骤二 我想输入同意(tongyi),结果变成了容易(ongyi)
    • 步骤三 第一个拼音被删掉了,并未输入完成,提前触发了change
    bug 受理 紧急 
    opened by JOJO-CPU 29
  • 页面上同时存在两个富文本,富文本1的值由富文本2输入的值动态改变。这个时候富文本2输入一个字符就会失去焦点一次

    页面上同时存在两个富文本,富文本1的值由富文本2输入的值动态改变。这个时候富文本2输入一个字符就会失去焦点一次

    bug 描述

    页面上同时存在两个富文本,富文本1的值由富文本2输入的值动态改变。这个时候富文本2输入一个字符就会失去焦点一次

    你预期的样子是?

    输入的同时不会失去焦点

    系统和浏览器及版本号

    • 操作系统:macOS
    • 浏览器和版本:Google Chrome 版本 99.0.4844.83(正式版本) (arm64)

    wangEditor 版本

    "@wangeditor/editor": "^5.1.22", "@wangeditor/editor-for-react": "^1.0.6",

    demo 能否复现该 bug ?

    官网没有同时两个富文本,在此附上线上demo:https://codesandbox.io/s/distracted-hoover-6tpu8w?file=/src/Wangeditor.jsx

    在线 demo

    请尽量提供在线 demo (推荐以下网站),帮助我们最低成本复现 bug https://codesandbox.io/s/distracted-hoover-6tpu8w?file=/src/Wangeditor.jsx

    最小成本的复现步骤

    页面上同时存在两个富文本,富文本1的值由富文本2输入的值动态改变。这个时候富文本2输入一个字符就会失去焦点一次

    question 
    opened by nian-x 26
  • 征集移动断富文本编辑器的设计建议

    征集移动断富文本编辑器的设计建议

    近期计划开始设计移动端的富文本编辑器,在此征求大家的建议和意见。只要是关于富文本编辑器的,随便写,无论是代码开发还是界面设计,还是目前市场的需求,还是用户体验的需要,都行,来着不惧。

    注意,不要写无关内容


    另外,在此说一下我自己的想法,我觉得移动端的编辑器和PC web端肯定是不一样的,要适应手机屏幕和手指操作,就必须做出调整,在此我将参考以下三个案例:有道云笔记、印象笔记和iOS备忘录

    img_1019

    img_1020

    opened by wangfupeng1988 25
  • 如何在初始化时,设置一个默认的字体、字号?

    如何在初始化时,设置一个默认的字体、字号?

    JSON 格式

        const jsonContent = [
            {
              type: 'paragraph',
              lineHeight: '1.5',
              children: [
                { text: '', fontFamily: '黑体', fontSize: '32px' }
              ]
            },
        ]
    
        const editor = E.createEditor({
          selector: '#editor-text-area',
          content: jsonContent,
          config: editorConfig
        })
    

    Vue React 组件有 defaultContent 属性,可传入上述 jsonContent

    HTML 格式

        const htmlContent = '<p style="line-height: 1.5;"><span style="font-size: 16px; font-family: 微软雅黑;"></span></p>'
    
        const editor = E.createEditor({
          selector: '#editor-text-area',
          html: htmlContent,
          config: editorConfig
        })
    

    Vue 组件可以使用 v-model 属性传入 HTML 内容,React 组件可以使用 value 属性传入 HTML 内容

    question 
    opened by wangfupeng1988 23
  • 复制文字后多出一个p标签包裹

    复制文字后多出一个p标签包裹

    bug 描述

    在文本最后复制文本,会追加

    标签包裹,导致写多几个字就换行。 复现条件:文本最后一个字是被b标签(其他标签也复现)包住 请输入内容…… image image 然后文字后面复制一段字进去 image image

    你预期的样子是?

    讲道理不是应该在原先p标签里面追加内容吗

    wangEditor 版本

    4.3.0 谷歌浏览器 86版本 MAC电脑

    官网能否复现该 bug ?

    不能

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该 bug)

    • 步骤一 区域里面重新输入一些文字
    • 步骤二 对最后的字加粗
    • 步骤三 然后去别的地方复制文本,直接粘贴
    question 
    opened by Ele-Lee 23
  • 收集 wangEditor5 文档 demo 和视频教程的问题和建议

    收集 wangEditor5 文档 demo 和视频教程的问题和建议

    如题,

    大家有任何问题和建议(仅限文档 demo 和视频教程的),都可以在这里回复,如合理,我近期将优化。

    • 文档 https://www.wangeditor.com/
    • demo https://www.wangeditor.com/demo/index.html
    • 视频教程 https://www.wangeditor.com/v5/video-course.html
    opened by wangfupeng1988 20
  • 输入中文的时候首字母无法转换

    输入中文的时候首字母无法转换

    bug 描述

    请输入内容…… X)HF$P6(W{O~R(JR3HG2RXG

    你预期的样子是?

    请输入内容……

    浏览器及版本号

    *请输入内容……*谷歌浏览器,版本:4.7.9

    wangEditor 版本

    请输入内容……

    官网能否复现该 bug ?

    能/不能

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该 bug)

    • 步骤一
    • 步骤二
    • 步骤三
    bug 
    opened by 199809a 19
  • React onChange 有闭包的问题

    React onChange 有闭包的问题

    bug 描述

    onChange闭包

    你预期的样子是?

    和任何组件/html element的onchange函数一样 当外部状态更新时,onChange内部并没有改变,并没有用useCallback

    wangEditor 版本

    最新

    demo 能否复现该 bug ?

    最小成本的复现步骤

    官网React例子

    question 
    opened by ANUGLYPLUGIN 18
  • 在angular7项目中引入V4版本编辑器报错

    在angular7项目中引入V4版本编辑器报错

    bug 描述

    参照官网文档正确安装,并且引入。 image

    image image

    你预期的样子是?

    应该正确new E 不会报错

    浏览器及版本号

    image

    wangEditor 版本

    请输入内容…… image

    官网能否复现该 bug ?

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该 bug)

    • 步骤一 使用angularCli创建任意版本的angular7 或者最新的10版本项目
    • 步骤二 参考官网引入wangEditot
    • 步骤三 构建相应的wangEdtior页面
    question 
    opened by scottMan1001 18
  • 光标自动换行问题

    光标自动换行问题

    "wangeditor": "^3.1.1"

    在移动端下使用:

    这个bug测试于谷歌浏览器F12的手机模式和真机验证都存在此bug:

    1. 首先在编辑器中第一行输入几个文字: image

    2. 回车, 再从第二行输入几个文字: image

    3. 再回到第一行中: image

    4. 继续在第一行输入: image

    5. 将后面输入的这四个字输入到编辑器中, 然后光标会自动跑到第二行末尾处: image

    这么一看, 文字少无所谓, 但是一篇或半篇文章下来, 回去看到了前面某一行不合适, 想编辑的时候, 还没等输入完, 光标就会强制性到文章最底部的末尾位置, 者体验度就特别不好了

    如果是打英文字母, 第一个字母刚打进第一行中, 接着后面输入的每一个字母都到了第二行中, 因为第一个字母输入完之后, 光标会强制性到第二行的末尾, 这个就更头疼了

    @wangfupeng1988 用了很多时间看了api且使用了您的这款插件, 整体感觉还不错, 最起码扩展性很好, 用了很多时间清楚地描述了这个问题, 希望您可以重视一下, 在线等... 谢谢

    opened by YuFy1314 18
  • editor为空获取value值存在

    ",在表单中无法校验">

    editor为空获取value值存在"


    ",在表单中无法校验

    问题描述

    editor为空获取value值存在"<p><br></p>",在表单中无法校验其是否输入内容

    wangEditor 版本

    V3, V4, V5…

    是否查阅了文档 ?

    (文档链接 www.wangeditor.com

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该问题?)

    • 新建editor
    • change事件的value
    • 步骤三
    question 
    opened by WaQuio 17
  • 通过setNodes添加节点属性不生效

    通过setNodes添加节点属性不生效

    问题描述

    通过setNodes替换选中图片的链接不生效

    wangEditor 版本

    "@wangeditor/editor": "^5.1.14",

    是否查阅了文档 ?

    (文档链接 www.wangeditor.com

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该问题?)

    自定义替换图片地址插件 选中图片之后 SlateTransforms.setNodes(props.editor, { // @ts-ignore src: imgUrl }, { mode: 'highest' // 针对最高层级的节点 }) setTimeout(() => { console.log(props.editor.getHtml()); },5000); 通过setNodes设置属性 打出来的 img 地址没有更换 打出选中的节点发现当前选中的节点是p 节点,导致设置的src设置到了p节点上

    demo

    opened by meicy 0
  • 粘贴word图文后,编辑器卡顿,输入删除延迟都非常高

    粘贴word图文后,编辑器卡顿,输入删除延迟都非常高

    问题描述

    请输入遇到的问题... 粘贴word图文后,编辑器卡顿,输入删除延迟都非常高,保存后再次打开还是一样 文字样式比较多,word30页,图片9张,通过customPaste将本地图片过滤掉还是卡顿,效果不明显

    wangEditor 版本

    @wangeditor/editor 5.1.15 @wangeditor/editor-for-vue 1.0.2

    是否查阅了文档 ?

    最小成本的复现步骤

    文字样式多的word整体赋值粘贴就可以复现

    opened by RobertYea 0
  • vue3中,Editor组件的onCreated不执行

    vue3中,Editor组件的onCreated不执行

    bug 描述

    vue3中,Editor组件的onCreated钩子不执行,导致编辑器没有加载出来

    你预期的样子是?

    可以获取到onCreated的回调参数editor

    系统和浏览器及版本号

    • 操作系统 64 位操作系统, 基于 x64 的处理器
    • 浏览器和版本 Chrome 版本 108.0.5359.125(正式版本) (64 位)

    wangEditor 版本

    "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "next",

    demo 能否复现该 bug ?

    不能

    • 中文 demo https://www.wangeditor.com/demo/
    • English demo https://www.wangeditor.com/demo/?lang=en

    在线 demo

    请尽量提供在线 demo (推荐以下网站),帮助我们最低成本复现 bug

    • https://codesandbox.io/
    • https://codepen.io/
    • https://stackblitz.com/

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该 bug)

    • 步骤一 启动一个vue3项目
    • 步骤二 复制官网vue3 demo代码跑一下
    • 步骤三
    opened by leekinm 0
  • 删除完编辑器编辑的内容bug

    删除完编辑器编辑的内容bug

    bug 描述

    删除完编辑器编辑的内容,获取html内容依然能够得到一个HTML标签数据,获取text却是没有内容

    你预期的样子是?

    删除完编辑器内可见的内容,获取html内容和text内容应该都是空内容

    系统和浏览器及版本号

    • 操作系统:windows11
    • 浏览器和版本 Microsoft Edge 版本 108.0.1462.54 (正式版本) (64 位)

    wangEditor 版本

    v5,vue3

    demo 能否复现该 bug ?

    能/不能 (不清楚,没有使用demo)

    • 中文 demo https://www.wangeditor.com/demo/
    • English demo https://www.wangeditor.com/demo/?lang=en

    在线 demo

    请尽量提供在线 demo (推荐以下网站),帮助我们最低成本复现 bug https://gitee.com/aurora-engine/management-system

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该 bug)

    • 步骤一 运行项目,可以直接点击登录,无账号密码
    • 步骤二 找到 src/components/editor/MainEditor.vue 系统菜单选择 文章管理/创作
    • 步骤三 控制台查看 onChange 的html 文本输出
    opened by go-aurora-engine 2
  • 是否可以通过接口改变节点的值

    是否可以通过接口改变节点的值

    问题描述

    是否有接口可以通过元素的id 改变该元素的children:[{text:"新值"}]

    wangEditor 版本

    v5

    是否查阅了文档 ?

    (文档链接 www.wangeditor.com

    最小成本的复现步骤

    (请告诉我们,如何最快的复现该问题?)

    • 步骤一
    • 步骤二
    • 步骤三
    opened by RichWF 0
Releases(v4.7.13)
  • v4.7.13(Apr 4, 2022)

  • v4.7.12(Feb 25, 2022)

  • v4.7.11(Dec 25, 2021)

    • fix: 插入链接后再修改的问题(fcaef96
    • docs: 切换 qq 群(39a2a99
    • fix: 删除文字的时候前一张图片不会被删除(bac1b1e
    • fix: delete text will delete img too(2d060d5
    • fix: 删除文字的时候前一张图片不会被删除(7c63218
    • fix: 修复选中段落设置行高,最后一行的内容会被重复添加的问题(46e49a9
    • docs: 切换 qq 群(7c31ee2
    Source code(tar.gz)
    Source code(zip)
  • v4.7.10(Dec 1, 2021)

  • v4.7.9(Oct 17, 2021)

  • v4.7.8(Sep 9, 2021)

  • v4.7.7(Aug 20, 2021)

    • feat: 修复当编辑区没内容时,上传一张图片,删除后鼠标位置的问题(2fec14e
    • fix: 清空内容后-点击工具栏上插入链接的按钮,无反应(c1340d1
    • fix: 无内容的情况下粘贴一段文本,粘贴后光标位于行首而不是粘贴内容的行尾(62d5c4a
    • fix: 修复低版本内核粘贴单张图报错(96f2f8d
    • fix: 图片添加链接直接删除防止报错(2ce2639
    Source code(tar.gz)
    Source code(zip)
  • v4.7.6(Jul 30, 2021)

  • v4.7.5(Jul 2, 2021)

  • v4.7.4(Jun 17, 2021)

  • v4.7.3(Jun 10, 2021)

  • v4.7.2(Jun 3, 2021)

    • fix: 修复给标题加超链接的问题(0d7a05e
    • fix: 禁修复多行插入链接造成页面卡死,止多行插入链链接(110b37a
    • fix: 修复删除全部内容后EMPTY_P前有个空格(1811f8c
    • fix: ts 构建错误(4603677
    • fix: 设置字体大小和颜色时,光标跳到行首(8fc7e04
    Source code(tar.gz)
    Source code(zip)
  • v4.7.1(May 20, 2021)

  • v4.7.0(May 13, 2021)

    • fix: 无法粘贴从qq复制过来的文本(fc88652
    • fix: 修复禁用状态下scroll-to-head功能失效(79d1326
    • fix: 修复ie11下 设置行高无效、多行无效和内容消失(b74f787
    • fix: 修复ie11序列功能无效的bug(b4ecdbd
    • fix: 全选删除表格内容,表格外的内容会进入表格(33aae89
    • fix: 修复panel菜单position位置的问题(c66fb8b
    • feat: 插件注册和初始化(00326b6
    • docs: 添加 plugin.md(c9f89ee
    Source code(tar.gz)
    Source code(zip)
  • v4.6.17(Apr 29, 2021)

    • perf: entrypoint from 261kb to 219kb(24a6fb0
    • perf: entrypoint from 261kb to 219kb(fc107b3
    • perf: entrypoint from 261kb to 219kb(809559b
    • chore: webpack perf config from common to prod(27e4c96
    • fix: lint(c3e93eb
    • chore: add performance budget tool(8ee5853
    • fix: 修复默认todo不触发change的问题(08696c9
    • fix: 解决全选后删除光标停留触发控制error的bug(ad61531
    • fix: 修复图片插入后修改样式后的光标位置(00539db
    • test: 修改插入图片测试用例(9295115
    • fix: 修复全选删除文本无法删除干净的问题(cb6a9c9
    • fix: 低版本谷歌粘贴图片报错(46dc441
    • docs: 非团队成员贡献代码英文文档(a9b0a08
    • fix: 修复placeholder中不能设置.的问题(e7aaf2d
    Source code(tar.gz)
    Source code(zip)
  • v4.6.16(Apr 22, 2021)

    • fix: 修复表格最后2列会一起删除(f86aeba
    • fix: 使用em样式时会继承上层节点的font-size(0fa62c2
    • fix: 修复排除自扩展菜单(66ebc43
    • fix: 选中图片插入链接,页面卡死(df3f464
    • fix: 同一节点只能绑定一个编辑器实例(935d03f
    • fix: 字体配置类型扩展(a0c30c1
    • fix: 粘贴pdf内容卡死(f57674c
    • fix: 火狐浏览器剪切后保留p标签的bug.(5e044e3
    • docs: 修改协议为MIT和版权时间(bb9ca5e
    Source code(tar.gz)
    Source code(zip)
  • v4.6.15(Apr 15, 2021)

    • fix: 修复长按删除键,失去焦点不触发blur的bug(9530e28
    • fix: 设置showLinkImg=false & uploadImgShowBase64=true 后,无法两次上传同一张图片(860fc52
    • fix: 修复删除所有内容后无法触发blur的问题(1c5869f
    • fix: 修复从浏览器点击复制后图片粘贴到编辑器图片出现2个bug(899748b
    • fix: 插入链接内容错误(d2be13a
    • fix: 修复插入代码异常问题(b5fb553
    • fix: 添加issue地址(90a5e45
    Source code(tar.gz)
    Source code(zip)
  • v4.6.14(Apr 8, 2021)

    • fix: 图片媒体库回调(bfc8484
    • chore: 修改release的token值(8a8547a
    • feat: 修复了append 时意外清除空格的问题(7b8273e
    • fix: 修复鼠标选中文字之后,再选择文字中间位置插入图片导致选中文字消失的问题(eaeb816
    • fix: 表格下面的标签无法删除(2f744b5
    Source code(tar.gz)
    Source code(zip)
  • v4.6.13(Apr 4, 2021)

    • fix: 回车切换字号失效 (5969bba)
    • fix: 输入中文时,placeholder 不消失 (a5d3d41)
    • fix: 修复直接复制粘贴链接,不会触发自定义pasteTextHandle (54d7d21)
    • fix: 修改 togglePlaceholder 判断逻辑 (34981fc)
    • feat: 视频新增对齐方式 (706ce15)
    Source code(tar.gz)
    Source code(zip)
  • v4.6.12(Mar 29, 2021)

    • fix: 兼容火狐浏览器video标签存在时光标无法输入问题 (452a494)
    • fix: 文字颜色和背景颜色中的白色不容易辨别, 调整位置 (6f0390b)
    • fix: 修复取消表头后,空行被删除 (82e47df)
    • fix: 修复设置isFocus为false的情况下,初始化完成后依旧触发blur事件的问题 (96e7a1e)
    • fix: 修复鼠标移出编辑区后获取选区异常 (967e612)
    • fix: 粘贴图片性能问题 (45db80b)
    • fix: wps粘贴问题 (772d704)
    Source code(tar.gz)
    Source code(zip)
Owner
wangEditor 团队
wangEditor 源码、文档、demo 等
wangEditor 团队