Summernote是一個超級簡單的所見即所得編輯器，基於jQuery和bootstrap3.x.x+開源庫構建，輕量級的富文本編輯器（js+css: 100Kb左右），除百度UMeditor之外的另一個選擇，兼容ie9+及所有現代瀏覽器，能夠滿足對文本的基本編輯需求，基於bootstrap也讓UI更加美觀。
Summernote有幾個特點：
從剪貼板粘貼圖片
主要操作都支持快捷鍵
保存圖像中直接使用base64編碼字段的內容,所以你不需要實現圖像處理
提供了簡易UI
交互式的所見即所得編輯模式
方便的集成服務器
1、下載及初始化
https://github.com/summernote/summernote/
①引入JS/CSS
下載文件並放到項目的任意位置，然後在頁面中引入summernote的js和css文件，需要先引入jQuery和bootstrap開源庫。引入下圖所示的五個文件即可（內置多語言，中文在最後引入lang文件夾中的summernote-zh-CN.js文件並初始化時配置參數lang:'zh-CN'即可）
②一個目標元素
然後<body>中某處的添加div標籤，這個元素將替換為summernote編輯器。
③summernote
最後，運行此腳本後，DOM就準備好了
也有一個適應React的版本，詳情請看：
https://github.com/summernote/react-summernote
2、一些例子展示
可以根據bootstrap主題改變風格
通過jQuery的class選擇器初始化多個summernote
通過按鈕來激活/關閉編輯狀態
源碼查看時可以使用代碼著色，更容易查看，這需要引入額外的js插件
3、整合
與Django、Ruby On Rails、AngularJS、Apache Wicket、Webpack和Meteor整合。能夠讓你在多種環境下輕鬆使用summernote。
summernote非常簡單直觀，使用方便，如果你項目使用的bootstrap UI強烈推舉使用summernote作為富文本編輯器，除了以上介紹的還有很多功能，如百度貼吧的輸入@出現選擇用戶等。感興趣的可以上官網瞭解詳情。
相關推薦
