這次帶給大家BootStrap的文字編輯器元件Summernote使用詳解，BootStrap文字編輯器元件Summernote使用詳解的注意事項有哪些，以下就是實戰案例，一起來看一下。
Summernote是一個基於jquery的bootstrap超級簡單WYSIWYG線上編輯器。 Summernote非常的輕量級，大小只有30KB，支援Safari,Chrome,Firefox、Opera、Internet Explorer 9 (IE8支援即將到來)。
特點：
世界上最好的WYSIWYG線上編輯器
極易安裝
開源
自訂初化選項
支援快捷鍵
適用於各種後端程式言語
Summernote官網網址 ：https://summernote.org/
這是官網的例子：
nbsp;html>
<meta>
<title>Summernote</title>
<link>
<script></script>
<script></script>
<link>
<script></script>
<p></p><p>Hello Summernote</p>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
效果圖：
# 最簡單的預設初始化元件的方式：
# 在
新增一個容器：
<p>Hello Summernote</p>
再用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...', // 佔位符## placeholder: 'write /對話方塊放在編輯方塊還是Body
dialogsFade: true ,//對話方塊顯示效果
shortcuts: false ,//停用快速鍵
還有
：callbacks: {
}
# 這裡主要介紹上傳圖片觸發的事件 onImageUpload ：
# 插入圖片的時候，Summernote元件預設是將圖片以二進位形式展示的，如果以此方式將文字方塊的內容儲存到資料庫時，會導致資料庫資料量很大
這是summernote預設方式插入圖片時儲存到資料庫的欄位：
所以這裡採用另一個方法，就是將圖片上傳到伺服器，上傳成功後回傳圖片的存取位址到插入的圖片位置，展示圖片；
內容功能 後台處理請求儲存圖片到伺服器，成功則返回圖片存取位址：
# 注意：我這裡是將圖片上傳的真實位址和虛擬的圖片存取位址在tomcat的server.xml中設定了映射關係，所以上傳成功後回傳給前端的是虛擬的存取位址；
callbacks: {
onImageUpload: function(file) { //图片默认以二进制的形式存储到数据库，调用此方法将请求后台将图片存储到服务器，返回图片请求地址到前端
//将图片放入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("上传失败");
}
});
}
}建議：真實的上傳根路徑應寫在properties
設定檔中，方便日後位址的修改，同時虛擬的存取根路徑也不應儲存到資料庫當中，只需儲存相對位置就可以，將虛擬的存取根路徑也寫在properties檔案當中。
推薦閱讀：
以上是BootStrap的文字編輯器元件Summernote使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
