summernote编辑器插件使用笔记
生活随笔
收集整理的這篇文章主要介紹了
summernote编辑器插件使用笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這次項目中需要用到編輯器插件，于是上網查了一下。由于需要的編輯器功能比較簡單，不需要太多復雜功能，所以選擇了一款特別輕量的summernote插件，而且后臺操作也很簡單。
官網：http://summernote.org/
github地址：https://github.com/summernote...
先來看一下官網的截圖
麻雀雖小五臟俱全。完全可以滿足編輯器的需要。
按照官網鏈接下載下來的是
我們需要使用的是在dist文件夾內
其中font主要是編輯器內的圖標顯示，lang是各種語言，css則是樣式。我們主要來看一下summernote.js。
summernote.js
定義
$.fn.extend({summernote: function () {var type = $.type(list.head(arguments));var isExternalAPICalled = type === 'string';var hasInitOptions = type === 'object';var options = hasInitOptions ? list.head(arguments) : {};options = $.extend({}, $.summernote.options, options);options.langInfo = $.extend(true, {}, $.summernote.lang['en-US'], $.summernote.lang[options.lang]);this.each(function (idx, note) {var $note = $(note);if (!$note.data('summernote')) {var context = new Context($note, options);$note.data('summernote', context);$note.data('summernote').triggerEvent('init', context.layoutInfo);}});var $note = this.first();if ($note.length) {var context = $note.data('summernote');if (isExternalAPICalled) {return context.invoke.apply(context, list.from(arguments));} else if (options.focus) {context.invoke('editor.focus');}}return this;}});這就是初始化summernote時執行的函數。
$.extend(object) 可以理解為JQuery 添加一個靜態方法。 $.fn.extend(object) 可以理解為JQuery實例添加一個方法。默認的options如下
options: {modules: {'editor': Editor,'clipboard': Clipboard,'dropzone': Dropzone,'codeview': Codeview,'statusbar': Statusbar,'fullscreen': Fullscreen,'handle': Handle,// FIXME: HintPopover must be front of autolink// - Script error about range when Enter key is pressed on hint popover'hintPopover': HintPopover,'autoLink': AutoLink,'autoSync': AutoSync,'placeholder': Placeholder,'buttons': Buttons,'toolbar': Toolbar,'linkDialog': LinkDialog,'linkPopover': LinkPopover,'imageDialog': ImageDialog,'imagePopover': ImagePopover,'videoDialog': VideoDialog,'helpDialog': HelpDialog,'airPopover': AirPopover},buttons: {},lang: 'zh-CN',// toolbar工具欄默認toolbar: [['style', ['style']],['font', ['bold', 'underline', 'clear']],['fontname', ['fontname']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['table', ['table']],['insert', ['link', 'picture', 'video']],['view', ['fullscreen', 'codeview', 'help']]],// popoverpopover: {image: [['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],['float', ['floatLeft', 'floatRight', 'floatNone']],['remove', ['removeMedia']]],link: [['link', ['linkDialogShow', 'unlink']]],air: [['color', ['color']],['font', ['bold', 'underline', 'clear']],['para', ['ul', 'paragraph']],['table', ['table']],['insert', ['link', 'picture']]]},// air mode: inline editorairMode: false,width: null,height: null,focus: false,tabSize: 4,styleWithSpan: false,shortcuts: true,textareaAutoSync: true,direction: null,styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New','Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande','Tahoma', 'Times New Roman', 'Verdana'],fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],// pallete colors(n x n)colors: [['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']],lineHeights: ['1.0', '1.2', '1.4', '1.5', '1.6', '1.8', '2.0', '3.0'],tableClassName: 'table table-bordered',insertTableMaxSize: {col: 10,row: 10},dialogsInBody: false,dialogsFade: false,maximumImageFileSize: null,callbacks: {onInit: null,//初始化回調函數onFocus: null,//聚集onBlur: null,//失去焦點onEnter: null,//回車鍵的回調函數onKeyup: null,onKeydown: null,onSubmit: null,//提交時回調函數onImageUpload: null,//這就是上傳圖片的回調函數onImageUploadError: null//上傳圖片出錯},codemirror: {mode: 'text/html',htmlMode: true,lineNumbers: true},keyMap: {pc: {'ENTER': 'insertParagraph','CTRL+Z': 'undo','CTRL+Y': 'redo','TAB': 'tab','SHIFT+TAB': 'untab','CTRL+B': 'bold','CTRL+I': 'italic','CTRL+U': 'underline','CTRL+SHIFT+S': 'strikethrough','CTRL+BACKSLASH': 'removeFormat','CTRL+SHIFT+L': 'justifyLeft','CTRL+SHIFT+E': 'justifyCenter','CTRL+SHIFT+R': 'justifyRight','CTRL+SHIFT+J': 'justifyFull','CTRL+SHIFT+NUM7': 'insertUnorderedList','CTRL+SHIFT+NUM8': 'insertOrderedList','CTRL+LEFTBRACKET': 'outdent','CTRL+RIGHTBRACKET': 'indent','CTRL+NUM0': 'formatPara','CTRL+NUM1': 'formatH1','CTRL+NUM2': 'formatH2','CTRL+NUM3': 'formatH3','CTRL+NUM4': 'formatH4','CTRL+NUM5': 'formatH5','CTRL+NUM6': 'formatH6','CTRL+ENTER': 'insertHorizontalRule','CTRL+K': 'linkDialog.show'},mac: {'ENTER': 'insertParagraph','CMD+Z': 'undo','CMD+SHIFT+Z': 'redo','TAB': 'tab','SHIFT+TAB': 'untab','CMD+B': 'bold','CMD+I': 'italic','CMD+U': 'underline','CMD+SHIFT+S': 'strikethrough','CMD+BACKSLASH': 'removeFormat','CMD+SHIFT+L': 'justifyLeft','CMD+SHIFT+E': 'justifyCenter','CMD+SHIFT+R': 'justifyRight','CMD+SHIFT+J': 'justifyFull','CMD+SHIFT+NUM7': 'insertUnorderedList','CMD+SHIFT+NUM8': 'insertOrderedList','CMD+LEFTBRACKET': 'outdent','CMD+RIGHTBRACKET': 'indent','CMD+NUM0': 'formatPara','CMD+NUM1': 'formatH1','CMD+NUM2': 'formatH2','CMD+NUM3': 'formatH3','CMD+NUM4': 'formatH4','CMD+NUM5': 'formatH5','CMD+NUM6': 'formatH6','CMD+ENTER': 'insertHorizontalRule','CMD+K': 'linkDialog.show'}},icons: {'align': 'icon-align','alignCenter': 'icon-align-center','alignJustify': 'icon-align-justify','alignLeft': 'icon-align-left','alignRight': 'icon-align-right','indent': 'icon-indent-right','outdent': 'icon-indent-left','arrowsAlt': 'icon-resize-full','bold': 'icon-bold','caret': 'icon-caret-down','circle': 'icon-circle','close': 'icon-close','code': 'icon-code','eraser': 'icon-eraser','font': 'icon-font','frame': 'icon-frame','italic': 'icon-italic','link': 'icon-link','unlink': 'icon-chain-broken','magic': 'icon-magic','menuCheck': 'icon-check','minus': 'icon-minus','orderedlist': 'icon-list-ol','pencil': 'icon-pencil','picture': 'icon-picture','question': 'icon-question','redo': 'icon-redo','square': 'icon-square','strikethrough': 'icon-strikethrough','subscript': 'icon-subscript','superscript': 'icon-superscript','table': 'icon-table','textHeight': 'icon-text-height','trash': 'icon-trash','underline': 'icon-underline','undo': 'icon-undo','unorderedlist': 'icon-list-ul','video': 'icon-facetime-video'} }關于編輯器需要的工具欄toolbar具體屬性可查看官網summernote-toolbar屬性
更改工具欄圖標
由于項目中我是直接使用fontawesome，所以我沒有再引入summernote.font，直接在options中的icons中修改。但比較麻煩，不知道有什么更好的方法，求指導。
關于圖片上傳、提交、按鍵等回調函數也是在options中，詳見callbacks部分。
初始化一個編輯器很簡單。只需要定義
<div class="summernote" id="myid"></div>$(function () {$('.summernote').summernote();//或者$('#myid').summernote(); });設置placeholder:
$('.summernote').summernote({placeholder:'請輸入文章內容',...});設置toolbar，
$('.summernote').summernote({toolbar:[['style',['bold','italic','underline','clear']],['fontsize',['fontsize']],['para',['ul','ol','paragraph']],['color',['color']]],...});更改圖片上傳的方式：
需要提及的是，summernote默認的圖片上傳方式為base64方式。若需要修改，看以下代碼。
【一定要注意：onImageUpload方法修改時要放在callbacks內配置，否則沒用】
我們項目的后臺是用spring+springMVC實現的。后臺圖片上傳代碼如下:
@RequestMapping(value = "/uploadMultipleFile", method = RequestMethod.POST, produces = "application/json;charset=utf8") @ResponseBody public String uploadMultipleFileHandler(@RequestParam("file") MultipartFile[] files, HttpServletRequest request) throws IOException {return UploadUtil.uploadImage(request.getServletContext().getRealPath("/"), files); }//UploadUtil.java中uploadImage方法如下public static String uploadImage(String serverPath, MultipartFile[] files) {try {String uploadPath = serverPath + getImageRelativePath();String images = "{}";//如果不存在目錄,創建一個目錄isDirectory(uploadPath);if (files != null && files.length > 0) {for (int i = 0; i < files.length; i++) {MultipartFile file = files[i];//save fileif (!file.isEmpty()) {String savePath = getImageRelativePath() + file.getOriginalFilename();//數據庫保存的圖片路徑images = JSONUtil.addProperty(images, String.valueOf(i), savePath);save(file, uploadPath);}}}return images;} catch (Exception e) {e.printStackTrace();return "{}";} }設置編輯器中的值：
$('#myid').summernote('code',content); 需要注意的是，content是html代碼，可能存在引號嵌套的問題導致報錯，記得將引號進行轉義。
后臺處理-java代碼：
獲取編輯器中的值：
var content = $('.summernote').summernote('code');上傳附件
這次項目需要使用附件，但發現summernote貌似沒有附件功能，于是自己研究了一下代碼，根據項目的需求，在link鏈接部分進行了修改。
效果如下：
首先，我們先看link按鈕所綁定的事件。
context.memo('button.link', function () {return ui.button({contents: ui.icon(options.icons.link),tooltip: lang.link.link,click: context.createInvokeHandler('linkDialog.show')}).render();});由上面的代碼可以發現click事件為：linkDialog.show，那么我們再來看一下linkDialog。
var LinkDialog = function (context) {...this.initialize = function () {//初始化...var body = '<div class="form-group">' +'<label>' + lang.link.textToDisplay + '</label>' +'<input class="note-link-text form-control" type="text" />' +'</div>' +'<div class="form-group">' +'<label>' + lang.link.attachment + '</label>' +'<input class="note-link-attachment form-control" type="file" />' +'</div>' +'<div class="form-group">' +'<label>' + lang.link.url + '</label>' +'<input class="note-link-url form-control" type="text" value="http://" />' +'</div>' +(!options.disableLinkTarget ?'<div class="checkbox">' +'<label>' + '<input type="checkbox" checked> ' + lang.link.openInNewWindow + '</label>' +'</div>' : '');var footer = '<button href="#" class="btn btn-primary note-link-btn disabled" disabled>' + lang.link.insert + '</button>';} }可以看到，點擊鏈接按鈕出現的彈框樣式就在LinkDialog的initialize方法中的body，所以我在中間添加了一個input上傳附件的部分。
'<div class="form-group">' + '<label>' + lang.link.attachment + '</label>' + '<input class="note-link-attachment form-control" type="file" />' + '</div>' +那么，我們需要在lang.link屬性中，新增一個attachment附件屬性。
除此之外，在中文的轉換部分summernote-zh-CN.min.js中，添加link的attachment: '添加附件'
好了，那么我們接下來需要處理的問題是上傳文件后的處理。
this.showLinkDialog = function (linkInfo) {return $.Deferred(function (deferred) {...//上傳文件的輸入框$linkAttachment = self.$dialog.find('.note-link-attachment'),ui.onDialogShown(self.$dialog, function () {...//對于輸入框的事件綁定$linkAttachment.on('change', function() {UploadFiles($linkAttachment.val(),function(url){$linkUrl.val(url);//將上傳后的URL賦值到linkUrl的輸入框中});});}} }UploadFiles與上述修改上傳圖片的形式一樣。
如果這篇文章對您有幫助，歡迎點贊。如果有疏漏，歡迎指正。
本文地址：http://lsxj615.com/2016/08/10...
總結
以上是生活随笔為你收集整理的summernote编辑器插件使用笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高德地图JS API 使用01
- 下一篇： 华为ME909 4G LTE模块在树莓派