介紹

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.wangEditorvar 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 文件！！！

wangEditor demo

歡迎使用 wangEditor 富文本編輯器

如果想要自己控制編輯區域的高度、寬度等尺寸信息，參見官方文檔中菜單與編輯區域分離。

項目地址

https://github.com/wangfupeng1988/wangEditor

總結

以上是生活随笔為你收集整理的富文本_轻量级 web 富文本编辑器 —— wangEditor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。