最近在做缺陷管理系統(tǒng)時(shí)用到了富文本編輯器挡毅，朋友推薦百度UEditor样刷，看過文檔之后覺得里面的功能豐富嗽交，但是配置也相對(duì)復(fù)雜，對(duì)于使用者要求較高颂斜。況且在輕量級(jí)網(wǎng)頁應(yīng)用的開發(fā)中也并不需要如此多的功能，所以真正需要的是一個(gè)使用簡單的輕量級(jí)富文本編輯器拾枣，出于方便考慮沃疮，也應(yīng)該盡可能保證“所見即所得”原則，那么wangEditor便是你的不二之選梅肤。
推薦理由：官網(wǎng)及入門文檔寫的十分友好司蔬，具有基本前端入門經(jīng)驗(yàn)的人即可上手使用。
貼一個(gè)帶有簡單配置的demo姨蝴，在vue及react中的使用以及更多文檔請(qǐng)?jiān)L問官網(wǎng)查看俊啼。
wangEditor官網(wǎng)地址
<!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 Ｊ谂痢！浮梢！ wangEditor3開始不再依賴jQuery-->
<script type="text/javascript" src="http://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var editor = new wangEditor('#editor')
// 或者 var editor = new wangEditor( document.getElementById('editor') )
//配置菜單欄顯示項(xiàng)
editor.customConfig.menus = [
'head', // 標(biāo)題
'bold', // 粗體
'fontSize', // 字號(hào)
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
//'link', // 插入鏈接
//'list', // 列表
'justify', // 對(duì)齊方式
//'quote', // 引用
//'emoticon', // 表情
'image', // 插入圖片
//'table', // 表格
//'video', // 插入視頻
//'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復(fù)
]
editor.customConfig.uploadImgServer = '/upload';//上傳本地圖片到服務(wù)器 '/upload'為服務(wù)端地址
editor.create();
editor.txt.html('<p>操作步驟:</p><br/><br/>');
editor.txt.append('<p>期望結(jié)果:</p><br/><br/>');
editor.txt.append('<p>實(shí)際結(jié)果:</p><br/><br/>');
</script>
</body>
</html>
實(shí)際效果：
