summernote的使用,及單圖片上傳
阿新 • • 發佈:2019-01-22
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"',2000); } }, error:function(){ layer.msg("系統繁忙,請聯絡管理員"); } }); } } });
感覺還不錯,先用著