wangEditor 基於javascript和css開發的 Web富文字編輯器， 輕量、簡潔、易用、開源免費
阿新 • • 發佈：2019-01-05
介紹
wangEditor —— 輕量級 web 富文字編輯器，配置方便，使用簡單。支援 IE10+ 瀏覽器。
介面效果圖：
使用方法：
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"> 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、具體引數配置請檢視官方使用手冊說明。