您的位置：首页 > Web前端 > JavaScript

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

2017-10-20 11:43 363 查看

介绍

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、具体参数配置请查看官方使用手册说明。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航