wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持 IE10+ 浏览器。
- 官网:www.wangEditor.com
- 文档:www.kancloud.cn/wangfupeng/wangeditor3/332599
- 源码:github.com/wangfupeng1988/wangEditor
来源官网
使用
var E = window.wangEditor var editor2 = new E('#div3') editor2.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 可查阅文档中“其他”章节中的相关介绍
下载
- 点击 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
)
普通的html引入:
代码示例如下。注意,以下代码中无需引用任何 CSS 文件!!!
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.create()
</script>
</body>
</html>
如果想要自己控制编辑区域的高度、宽度等尺寸信息,参见 菜单与编辑区域分离
使用模块定义
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>
CommonJS
可以使用npm install wangeditor
安装(注意,这里wangeditor
全是小写字母)
// 引用 var E = require('wangeditor') // 使用 npm 安装 var E = require('/wangEditor.min.js') // 使用下载的源码 // 创建编辑器 var editor = new E('#editor') editor.create()vue引入###editor.vue
###App.vue
用于 Vue
如果需要将 wangEditor 用于 Vue 中,可参见如下示例
- 下载源码
git clone git@github.com:wangfupeng1988/wangEditor.git
- 进入 vue 示例目录
cd wangEditor/example/demo/in-vue/
,查看src/components/Editor.vue
即可 - 也可以运行
npm install && npm run dev
查看在 vue 中的效果(http://localhost:8080/
)