介绍
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
- 官网：www.wangEditor.com
- 文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
- 源码：github.com/wangfupeng1988/wangEditor
查看 v2 版本的代码和文档：https://github.com/wangfupeng1988/wangEditor/tree/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
使用
var E = window.wangEditor
var editor = new E('#div1')
editor.create()
运行 demo
- 下载源码 git clone git@github.com:wangfupeng1988/wangEditor.git
- 安装或者升级最新版本 node（最低v6.x.x）
- 进入目录，安装依赖包 cd wangEditor && npm i
- 安装包完成之后，windows 用户运行npm run win-example，Mac 用户运行npm run example
- 打开浏览器访问localhost:3000/index.html
- 用于 React、vue 或者 angular 可查阅官方文档中其他章节中的相关介绍
简单的 demo
下载
- 点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可
- 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js
- 使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）
PS：支持npm安装，请参见后面的章节
制作 demo
编辑器效果如下。
代码示例如下。注意，以下代码中无需引用任何 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>
如果想要自己控制编辑区域的高度、宽度等尺寸信息，参见官方文档中菜单与编辑区域分离。
项目地址
https://github.com/wangfupeng1988/wangEditor
本文暂时没有评论，来添加一个吧(●'◡'●)