wangEditor 基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费_wangeditor富文本编辑器的复制粘贴有css 代码 cdn-优快云博客

本文链接：https://blog.youkuaiyun.com/aizhuanjiao666/article/details/78293813

wangEditor是一款基于JavaScript和CSS开发的Web富文本编辑器，特点是轻量、简洁、易用且开源免费。适用于IE10+浏览器。提供官网、文档和源码，支持AMD、CommonJS模块定义，可通过直接下载或CDN引入使用。配置方便，使用简单。

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

介绍

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor （欢迎 star）
查看 v2 版本的代码和文档点击这里
下载
- 直接下载：https://github.com/wangfupeng1988/wangEditor/releases
- 使用npm下载：npm install wangeditor （注意 wangeditor 全部是小写字母）
- 使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
- 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

界面效果图：

使用方法：

1、常规使用方法

注意，以下代码中无需引用任何 CSS 文件！！！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">  	 // 定义富文本编辑器容器
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('#editor') )
        editor.create()
    </script>
</body>
</html>

2、使用模块定义

wangEditor 除了直接使用<script>引用之外，还支持AMD和CommonJS的引用方式。

AMD

以require.js为例演示

先创建main.js，代码为

require(['/wangEditor.min.js'], function (E) {
    var editor = new E('#editor')
    editor.create()
})

然后创建页面，代码为

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 wangEditor 富文本编辑器</p>
    </div>

    <script data-main="./main.js" src="//cdn.bootcss.com/require.js/2.3.3/require.js"></script>
</body>
</html>

3、CommonJS

可以使用npm install wangeditor安装（注意，这里wangeditor全是小写字母）

// 引用
var E = require('wangeditor')  // 使用 npm 安装
var E = require('/wangEditor.min.js')  // 使用下载的源码

// 创建编辑器
var editor = new E('#editor')
editor.create()

注意：下面代码可以用来试着容器高度随内容高度的自适应。

$('#Editor').attr('style','height:auto;');

4、具体参数配置请查看官方使用手册说明。

wangEditor 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

介绍

下载

2、使用模块定义

AMD

3、CommonJS

wangEditor 基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费