summernote是一款不錯的文本編輯器,樓主也是剛剛用,目前用到的就是文字和圖檔
直接上代碼了
<div id="summernote"></div>
這個是html代碼,下面就是初始化和圖檔上傳應用的代碼
//富文本編輯器初始化
$('#summernote').summernote({
height: 200, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
lang:'zh-CN',
//fontNames: ['helvetica'],
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']], //幫助
],
callbacks:{
onImageUpload:function(files){
var formData = new FormData();
formData.append("file",files[0]);
$.ajax({
type:"post",
url:config.url+"/app/uploadFile?token="+window.sessionStorage.tokenbody,
async:true,
cache:false,
data:formData,
processData:false,
contentType:false,
dataType:"json",
success:function(data){
if(data.errcode == 0){
var imgNode = document.createElement("img");
//讀取背景傳回的圖檔url
imgNode.src = data.body;
console.log(imgNode.src);
$('#summernote').summernote('insertImage',imgNode.src);
}
if(data.errcode != 0 && data.errcode != 103){
layer.msg(data.errmsg);
}
if(data.errcode == 103){
layer.msg(data.errmsg+",将于2秒後自動跳轉到登入頁");
setTimeout('window.location.href="./login.html" target="_blank" rel="external nofollow" ',2000);
}
},
error:function(){
layer.msg("系統繁忙,請聯系管理者");
}
});
}
}
});
感覺還不錯,先用着