summernote 簡潔的富文字編輯器 初體驗
阿新 • • 發佈：2019-02-04
參考：
官網下載：
匯入檔案：
引入js
<!-- summernote -->
<link rel="stylesheet" href="..css/summernote/summernote.css" type='text/css' />
<script src="../js/summernote/summernote.js"></script>初始化HTML
<!-- 富文字編輯器 summernote --> <div class="form-group"> <label for="content" class="col-sm-2 control-label">富文字內容</label> <div class="col-sm-8"> <div class="summernote" id="summernote"></div> </div> </div> <!-- 隱藏的文字域 --> <input name="content" id="content" hidden />
（1）初始化方法，其中callback就是用作上傳圖片然後回撥url地址用的
（2）sendFile就是你自己寫的一個向後臺具體上傳的方法
（3）save就是整個表單的提交（因為富文字編輯器只是表單的一部分內容）
<script> /** * 富文字編輯器初始化 * */ $('#summernote').summernote({ height: 400, lang: 'zh-CN', focus:true, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['fontsize', ['fontsize']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']], ['insert', ['picture']] ], callbacks: { onImageUpload: function(files, editor, $editable) { sendFile(files); } } }); function sendFile(files, editor, $editable) { var formdata = new FormData(); formdata.append("file", $('.note-image-input')[0].files[0]); $.ajax({ data : formdata, type : "POST", url : "/xxx/upload", //圖片上傳出來的url，返回的是圖片上傳後的路徑，http格式 cache : false, contentType : false, processData : false, dataType : "json", success: function(data) { console.info("插入的圖片：" + data.data); //data是返回的hash,key之類的值，key是定義的檔名 $('#summernote').summernote('insertImage', data.data); }, error:function(){ alert("上傳失敗"); } }); } /** * 儲存 */ $('#btnSave').on('click', function () { //獲取文字的內容，並賦值給隱藏的input中 var content = $('.summernote').summernote('code'); $('#content').val(content); $.ajax({ url: "/xxx/add", type: "POST", data: new FormData($("#form")[0]), processData: false,//因為data值是FormData物件，不需要對資料做處理。 contentType: false,//表單已經設定了multipart cache: false, success: function (data) { if (data.code == "1") { window.location.href="/xxx/home"; }else if(data.code == -1){ alert(data.msg); } }, error: function (e) { alert("儲存失敗"); window.location.href="/xxx/home"; }, complete: function () { } }); }); </script>
--------------------------------------回顯-------------------------------------
引入js
<!-- summernote -->
<link rel="stylesheet" href="..css/summernote/summernote.css" type='text/css' />
<script src="../js/summernote/summernote.js"></script>HTML
<!-- 富文字編輯器 summernote --> <div class="form-group"> <label for="content" class="col-sm-2 control-label">富文字內容</label> <div class="col-sm-8"> <div class="summernote" id="summernote"></div> </div> </div> <!-- 隱藏的文字域 --> <input name="content" id="content" hidden th:value="${data.content}" />
js：
先從隱藏的標籤中拿到content的資料，然後交給富文字編輯器
因為我的內容中有各種標籤<p><img>等等，所以用pasteHTML回顯資料內容，你是純文字的話，可以用insertText
<script th:inline="javascript">
//富文字編輯器內容回顯
var content = $('#content').val();
$('#summernote').summernote('pasteHTML', content);
// $('#summernote').summernote('insertText', content);
/**
* 富文字編輯器
* */
$('#summernote').summernote({
height: 400,
lang: 'zh-CN',
focus:true,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['picture']]
],
callbacks: {
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
});
function sendFile(files, editor, $editable) {
var formdata = new FormData();
formdata.append("file", $('.note-image-input')[0].files[0]);
$.ajax({
data : formdata,
type : "POST",
url : "/xxx/upload", //圖片上傳出來的url，返回的是圖片上傳後的路徑，http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {
console.info("插入的圖片：" + data.data);
//data是返回的hash,key之類的值，key是定義的檔名
$('#summernote').summernote('insertImage', data.data);
},
error:function(){
alert("上傳失敗");
}
});
}
/**
* 儲存
*/
$('#btnSave').on('click', function () {
//獲取文字的內容，並賦值給隱藏的input中
var content = $('.summernote').summernote('code');
$('#content').val(content);
$.ajax({
url: "/xxx/update",
type: "POST",
data: new FormData($("#form")[0]),
processData: false,//因為data值是FormData物件，不需要對資料做處理。
contentType: false,//表單已經設定了multipart
cache: false,
success: function (data) {
if (data.code == "1") {
window.location.href="/xxx/home";
}else if(data.code == -1){
alert(data.msg);
}
},
error: function (e) {
alert("儲存失敗");
window.location.href="/xxx/home";
},
complete: function () {
}
});
});
</script>