summernote 富文字編輯器 簡單例項
阿新 • • 發佈:2019-01-08
summernote 富文字編輯器
簡介
Summernote 是一個簡單,靈活,所見即所得(WYSIWYG)的編輯器,基於 jQuery 和 Bootstrap 構建。Summernote 所有主要的操作都支援快捷鍵,有一個功能強大的 API,它提供了大量的自定義選項的設計(寬,高,有效的專案等等)和功能。對於主要的指令碼語言或框架(PHP,Ruby,Django,NodeJS),該專案有提供了整合示例。
應用例項
引入相應js css
<link href="css/plugins/summernote/summernote.css" rel="stylesheet" >
<link href="css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<script src="js/plugins/summernote/summernote.min.js"></script>
建立div
<div class="summernote" id="content" class="form-control"></div>
初始化程式碼
$('.summernote').summernote({
height: 1000,
toolbar: [
['style' , ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['fontname',['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table' ,['table']],
['insert', ['picture','link']] ,
['help',['help']]
],
onImageUpload: function(files, editor, $editable) {
sendFile(files,editor,$editable);
},
onblur: function(e) {
//$('.summernote').html("");
//$('#content').html($(this).code());
validateContent();
},
onfocus:function(e){
validateContent();
},
onChange: function(contents, $editable) {
validateContent();
},
bFullscreen:false,
});
function sendFile(file, editor, $editable) {
for(var i = 0;i < file.length;i++){
data = new FormData();
data.append("file", file[i]);
url = ctx+"/x'x'x/imgUploads";
$.ajax({
data: data,
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
success: function (msg) {
if(1 == msg.code){
// editor.insertImage($editable, imagePrefix+encodeURIComponent(msg.data));
editor.insertImage($editable, imagePrefix+msg.data);
}
else{
bootbox.alert(msg.message);
}
// $('.summernote').summernote('editor.insertImage', "product/downloadFile?filePath="+msg.data);
}
});
}
};