基于BootStrap的文本編輯器組件Summernote
Summernote是一個基于jquery的bootstrap超級簡單WYSIWYG在線編輯器。Summernote非常的輕量級，大小只有30KB，支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即將到來)。
特點：
世界上最好的WYSIWYG在線編輯器
極易安裝
開源
自定義初化選項
支持快捷鍵
適用于各種后端程序言語
Summernote官網(wǎng)地址 ：https://summernote.org/
這是官網(wǎng)的一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link rel="external nofollow" 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>
<link rel="external nofollow" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
</html>
效果圖：
最簡單的默認初始化組件的方式：
在<body>添加一個容器<div>：
<div id="summernote">Hello Summernote</div>
再用Jquery初始化該組件：
$(document).ready(function() {
$('#summernote').summernote();
});
我們也可以自定義組件，如自定義編輯框的高度：
$('#summernote').summernote({
height: 300, // 定義編輯框高度
minHeight: null, // 定義編輯框最低的高度
maxHeight: null, // 定義編輯框最高德高度
});
我們還可以自定義工具欄：
<!--工具欄--> toolbar: [ <!--字體工具--> ['fontname', ['fontname']], //字體系列 ['style', ['bold', 'italic', 'underline', 'clear']], // 字體粗體、字體斜體、字體下劃線、字體格式清除 ['font', ['strikethrough', 'superscript', 'subscript']], //字體劃線、字體上標、字體下標 ['fontsize', ['fontsize']], //字體大小 ['color', ['color']], //字體顏色 <!--段落工具--> ['style', ['style']],//樣式 ['para', ['ul', 'ol', 'paragraph']], //無序列表、有序列表、段落對齊方式 ['height', ['height']], //行高 <!--插入工具--> ['table',['table']], //插入表格 ['hr',['hr']],//插入水平線 ['link',['link']], //插入鏈接 ['picture',['picture']], //插入圖片 ['video',['video']], //插入視頻 <!--其它--> ['fullscreen',['fullscreen']], //全屏 ['codeview',['codeview']], //查看html代碼 ['undo',['undo']], //撤銷 ['redo',['redo']], //取消撤銷 ['help',['help']], //幫助 ],
其它的一些初始化設置：
lang:'zh-CN', //設置中文，需引入中文插件summernote-zh-CN.js
placeholder: 'write here...', //占位符
dialogsInBody: true, //對話框放在編輯框還是Body
dialogsFade: true ,//對話框顯示效果
disableDragAndDrop: true ,//禁用拖放功能
shortcuts: false ,//禁用快捷鍵
還有回調(diào)函數(shù)：
callbacks: {
}
回調(diào)函數(shù)里面的事件有 oninit，onenter，onfocus，onblur，onkeyup，onkeydown，onpaste,onImageUpload 等等，
這里主要介紹上傳圖片觸發(fā)的事件 onImageUpload ：
插入圖片的時候，Summernote組件默認是將圖片以二進制形式展示的，如果以此方式將文本框的內(nèi)容存儲到數(shù)據(jù)庫時，會導致數(shù)據(jù)庫數(shù)據(jù)量很大
這是summernote默認方式插入圖片時存儲到數(shù)據(jù)庫的字段：
所以這里采用另一個方法，就是將圖片上傳到服務器，上傳成功后回傳圖片的訪問地址到插入的圖片位置，展示圖片；
具體實現(xiàn)如下：
callbacks: {
onImageUpload: function(file) { //圖片默認以二進制的形式存儲到數(shù)據(jù)庫，調(diào)用此方法將請求后臺將圖片存儲到服務器，返回圖片請求地址到前端
//將圖片放入Formdate對象中
var formData = new FormData();
//‘picture'為后臺獲取的文件名，file[0]是要上傳的文件
formData.append("picture", file[0]);
$.ajax({
type:'post',
url:'請求后臺地址',
cache: false,
data:formData,
processData: false,
contentType: false,
dataType:'text', //請求成功后，后臺返回圖片訪問地址字符串，故此以text格式獲取，而不是json格式
success: function(picture) {
$('#summernote').summernote('insertImage',picture);
},
error:function(){
alert("上傳失敗");
}
});
}
}
后臺處理請求存儲圖片到服務器，成功則返回圖片訪問地址：
注意：我這里是將圖片上傳的真實地址和虛擬的圖片訪問地址在tomcat的server.xml中配置了映射關系，所以上傳成功后返回給前端的是虛擬的訪問地址；
@RequestMapping(value="contentFileUpload",method=RequestMethod.POST)
@ResponseBody
public String contentFileUpload(MultipartFile picture) {
if (picture!=null && picture.getOriginalFilename()!=null && picture.getOriginalFilename().trim().length()>0) {
/**
* picture上傳路徑（+時間文件夾）
*/
//真實的上傳根路徑
String realUploadPath = 'D:/Program Files (x86)/apache-tomcat-8.5.16/webapps/file';
//虛擬的文件訪問根路徑
String fictitiousRoot = '/file'
//建立以時間命名的文件夾
SimpleDateFormat sdf=new SimpleDateFormat("/yyyy/MM/dd/");
String datePath = sdf.format(new Date());
//最終真實路徑
String realuUploadBrandPath = realUploadPath+"/content"+datePath;
//最終虛擬訪問路徑
String fictitiousUploadBrandPath =fictitiousRoot +"/content"+datePath;
// 上傳文件原始名稱
String originFileName = picture.getOriginalFilename();
// 新的文件名稱
String newFileName = UUID.randomUUID()+originFileName.substring(originFileName.lastIndexOf("."));
//如果路徑文件夾不存在就創(chuàng)建
File dir=new File(realuUploadBrandPath);
if(!dir.exists()){
dir.mkdirs();
}
// 新文件
File newFile = new File(realuUploadBrandPath+File.separator+newFileName);
// 將內(nèi)存中的文件寫入磁盤
try {
picture.transferTo(newFile);
} catch (IllegalStateException | IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 文件虛擬地址
String fictitiousFilePath = fictitiousUploadBrandPath+newFileName;
return fictitiousFilePath;
}
return "false";
}
建議：真實的上傳根路徑應寫在properties配置文件中，方便日后地址的修改，同時虛擬的訪問根路徑也不應存儲到數(shù)據(jù)庫當中，只需存儲相對位置就可以，將虛擬的訪問根路徑也寫在properties文件當中。
通過上面的方法處理后，存儲到數(shù)據(jù)庫的字段：
獲取編輯框內(nèi)容的方法：
var markupStr = $('#summernote').summernote('code');
總結
以上所述是小編給大家介紹的基于BootStrap的文本編輯器組件Summernote，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)輪播圖的制作方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了json的結構與遍歷方法,結合具體實例形式分析了json常見的簡單與復雜結構表示方法,以及具體的遍歷操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript的9種繼承實現(xiàn)方式歸納,本文講解了原型鏈繼承、原型繼承（非原型鏈）、臨時構造器繼承、屬性拷貝、對象間繼承等繼承方式,需要的朋友可以參考下2015-05-05
javascript中先加加和后加加區(qū)別 ++a和a++區(qū)別解析
從學習 javascript 開始,就對 先加加 和 后加加 模糊不清,時至今日,再來學習一下,這篇文章主要介紹了javascript中先加加和后加加區(qū)別++a和a++區(qū)別解析,需要的朋友可以參考下2023-09-09
在JS中繼承是一個非常復雜的話題，比其他任何面向對象語言中的繼承都復雜得多。接下來通過本文給大家介紹JavaScript中的繼承之類繼承，感興趣的朋友一起看看吧2016-05-05
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)如何使用云函數(shù)生成二維碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
本文為大家介紹的是使用JS寫的貪吃蛇游戲,個人練習之用，感興趣的額朋友可以參考下哈，希望對大家學習js有所幫助2013-07-07
最近公司和第三方材料供應商對接開發(fā)了物資集采平臺,其中有個功能需求需要展示數(shù)百張材料信息圖片,有時頁面會出現(xiàn)卡頓的情況,并使用了圖片懶加載的方式進行了優(yōu)化,下面把方法分享給大家一起學習,感興趣的小伙伴跟著小編一起來看看吧2024-12-12
這篇文章主要介紹了js實現(xiàn)Select下拉框具有輸入功能的方法,實例分析了兩種比較常見的實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了H5+css3+js搭建帶驗證碼的登錄頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10