wangEditor富文本编辑器的使用（一）——基本介绍

最新推荐文章于 2025-04-10 12:02:13 发布

viceen

最新推荐文章于 2025-04-10 12:02:13 发布

阅读量1.2k

点赞数

分类专栏：工具文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120885783

版权

工具专栏收录该内容

163 篇文章

订阅专栏

wangEditor是一个用Typescript开发的Web富文本编辑器，兼容多种常见浏览器，但不支持移动端。它提供NPM和CDN两种引入方式，简单几行代码即可创建编辑器。通过配置onchange事件，可以实现实时监控内容变化。此外，还可自定义onchange触发的延迟时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wangEditor富文本编辑器的使用（一）——基本介绍

1、介绍

wangEditor-Typescript 开发的 Web 富文本编辑器。

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

不支持移动端。

官网 http://www.wangeditor.com/
V4 文档 http://www.wangeditor.com/doc/
源码 https://github.com/wangeditor-team/wangEditor

2、使用手册

官方 https://www.wangeditor.com/doc/

看云 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

在线体验 demo https://codepen.io/collection/DNmPQV

示例

在这里插入图片描述

3、基本使用

NPM

npm i wangeditor --save

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

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

CDN

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/wangeditor@latest/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>

配置 onchange 函数

配置onchange函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发onchange函数执行。

示例1

<div id="div1">
    <p>请输入内容...</p>
</div>

<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
    var editor = new wangEditor("div1");
    
    // 配置 onchange 事件
    editor.onchange = function () {
        // 编辑区域内容变化时，实时打印出当前内容
        console.log(this.$txt.html());
    };
    
    editor.create();
</script>

示例2

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

<p>手动触发 onchange 函数执行</p>
<button id="btn1">change</button>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.customConfig.onchange = function (html) {
        // html 即变化之后的内容
        console.log(html)
    }
    editor.create()

    document.getElementById('btn1').addEventListener('click', function () {
        // 如果未配置 editor.customConfig.onchange，则 editor.change 为 undefined
        editor.change && editor.change()
    })

</script>

另外，如果需要修改 onchange 触发的延迟时间（onchange 会在用户无任何操作的 xxx 毫秒之后被触发），可通过如下配置

// 自定义 onchange 触发的延迟时间，默认为 200 ms
editor.customConfig.onchangeTimeout = 1000 // 单位 ms