官方文檔：http://www.wangeditor.com/
效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
<style>
*{
font-size:14px;
}
</style>
</head>
<body>
<div id="editor">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<button id="controlBtn" onclick="changeState()">禁用</button>
<button id="getBtn" onclick="getContent()">獲取內容</button>
<p>html：</p>
<div id="content_html"></div>
<p>text：</p>
<div id="content_text"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 注意， 只需要引用 JS，無需引用任何 CSS-->
<script type="text/javascript" src="js/wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') )
editor.customConfig.menus = [ // 自定義菜單配置,默認有以下菜單
'head', // 標題
'bold', // 粗體
'fontSize', // 字號
'fontName', // 字體
'italic', // 斜體
'underline', // 下划線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'table', // 表格
'video', // 插入視頻
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復
]
editor.customConfig.uploadImgServer = '上傳圖片服務器';
// editor.customConfig.uploadImgFileName = '';
editor.customConfig.menuFixed = false; // 關閉菜單欄fixed,吸頂問題
editor.create()
var state = true;
function changeState() {
state = !state;
if (state) {
$('#controlBtn').html('禁用');
// 開啟編輯功能
editor.$textElem.attr('contenteditable', true); //注意wangeditor的版本，不同版本可能方法不一
} else {
$('#controlBtn').html('啟用');
// 禁用編輯功能
editor.$textElem.attr('contenteditable', false);
}
}
function getContent() {
var e_html = editor.txt.html(); //獲取html
var e_text = editor.txt.text(); //獲取text
$('#content_html').text(e_html);
$('#content_text').text(e_text);
}
</script>
</body>
</html>