官網：https://summernote.org/css
它的特色：前端
- 開源
- 使用Bootstrap 3.xx到4.xx
- 輕量級（js + css：100Kb）
- 智能用戶交互
- 適用於全部主要瀏覽器：
- Safari，Chrome，Firefox，Opera，Edge和Internet Explorer 9+
- 適用於全部主要操做系統：
- Windows，MacOS，Linux
使用方法：jquery
1.添加引用ajax
<!-- include libraries(jQuery, bootstrap) -->bootstrap
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">瀏覽器
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>框架
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>測試
<!-- include summernote css/js -->操作系統
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">.net
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/lang/summernote-zh-CN.min.js"></script>
tips:
此框架是基於bootstrap的，因此要添加bootstrap引用; 引用了中文語言包。
2.前端代碼：
<div id="summernote"></div>
<script>
$(document).ready(function () {
$('#summernote').summernote({
height: '300px',
lang: 'zh-CN',
callbacks: {
onImageUpload: function (files) {//上傳圖片 sendFile(files); } } });
$('#summernote').summernote('code', '測試富文本框');
//賦值
var content = $('#summernote').summernote('code');
//取值
console.log(content); });
function sendFile(files) {
$('#summernote').summernote('insertImage', 'https://avatar.csdn.net/C/B/7/3_zero_295813128.jpg');//插入圖片 //處理上傳圖片及誒口並返回路徑...
}
</script> 