summernote富文本編輯器

官網：https://summernote.org/

它的特色：

• 開源
• 使用Bootstrap 3.xx到4.xx
• 輕量級（js + css：100Kb）
• 智能用戶交互
• 適用於全部主要瀏覽器：
  • Safari，Chrome，Firefox，Opera，Edge和Internet Explorer 9+
• 適用於全部主要操做系統：
  • Windows，MacOS，Linux

使用方法：

1.添加引用

<!-- include libraries(jQuery, 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">

<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>