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/）