這次項目中需要用到編輯器插件，于是上網(wǎng)查了一下。由于需要的編輯器功能比較簡單，不需要太多復(fù)雜功能，所以選擇了一款特別輕量的summernote插件，而且后臺操作也很簡單。
官網(wǎng)：http://summernote.org/
github地址：https://github.com/summernote...

先來看一下官網(wǎng)的截圖

麻雀雖小五臟俱全。完全可以滿足編輯器的需要。

按照官網(wǎng)鏈接下載下來的是

我們需要使用的是在dist文件夾內(nèi)

其中font主要是編輯器內(nèi)的圖標(biāo)顯示，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時執(zhí)行的函數(shù)。

$.extend(object) 可以理解為JQuery 添加一個靜態(tài)方法。 $.fn.extend(object) 可以理解為JQuery實例添加一個方法。

默認(rèn)的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工具欄默認(rèn)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,//初始化回調(diào)函數(shù)onFocus: null,//聚集onBlur: null,//失去焦點onEnter: null,//回車鍵的回調(diào)函數(shù)onKeyup: null,onKeydown: null,onSubmit: null,//提交時回調(diào)函數(shù)onImageUpload: null,//這就是上傳圖片的回調(diào)函數(shù)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'} }

關(guān)于編輯器需要的工具欄toolbar具體屬性可查看官網(wǎng)summernote-toolbar屬性

更改工具欄圖標(biāo)

由于項目中我是直接使用fontawesome，所以我沒有再引入summernote.font，直接在options中的icons中修改。但比較麻煩，不知道有什么更好的方法，求指導(dǎo)。

關(guān)于圖片上傳、提交、按鍵等回調(diào)函數(shù)也是在options中，詳見callbacks部分。

初始化一個編輯器很簡單。只需要定義

<div class="summernote" id="myid"></div>$(function () {$('.summernote').summernote();//或者$('#myid').summernote(); });

設(shè)置placeholder:

$('.summernote').summernote({placeholder:'請輸入文章內(nèi)容',...});

設(shè)置toolbar，

$('.summernote').summernote({toolbar:[['style',['bold','italic','underline','clear']],['fontsize',['fontsize']],['para',['ul','ol','paragraph']],['color',['color']]],...});

更改圖片上傳的方式：

需要提及的是，summernote默認(rèn)的圖片上傳方式為base64方式。若需要修改，看以下代碼。
【一定要注意：onImageUpload方法修改時要放在callbacks內(nèi)配置，否則沒用】

$('#myid').summernote({callbacks:{onImageUpload: function(files, editor, $editable) {UploadFiles(files,insertImg);}},... });function insertImg(){for(i in imageUrl){$('.summernote').summernote('editor.insertImage',imageUrl[i]);} }function UploadFiles(files,func){ //這里files是因為我設(shè)置了可上傳多張圖片，所以需要依次添加到formData中var formData = new FormData();for(f in files){formData.append("file", files[f]);}$.ajax({data: formData,type: "POST",url: "/uploadMultipleFile",cache: false,contentType: false,processData: false,success: function(imageUrl) {func(imageUrl);},error: function() {console.log("uploadError");}}) }

我們項目的后臺是用spring+springMVC實現(xiàn)的。后臺圖片上傳代碼如下:

@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 = "{}";//如果不存在目錄,創(chuàng)建一個目錄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();//數(shù)據(jù)庫保存的圖片路徑images = JSONUtil.addProperty(images, String.valueOf(i), savePath);save(file, uploadPath);}}}return images;} catch (Exception e) {e.printStackTrace();return "{}";} }

設(shè)置編輯器中的值：

$('#myid').summernote('code',content);

需要注意的是，content是html代碼，可能存在引號嵌套的問題導(dǎo)致報錯，記得將引號進(jìn)行轉(zhuǎn)義。
后臺處理-java代碼：

content = content.replaceAll("'","\\'"); content = content.replaceAll(""", "\\"");

獲取編輯器中的值：

var content = $('.summernote').summernote('code');

上傳附件

這次項目需要使用附件，但發(fā)現(xiàn)summernote貌似沒有附件功能，于是自己研究了一下代碼，根據(jù)項目的需求，在link鏈接部分進(jìn)行了修改。
效果如下：

首先，我們先看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();});

由上面的代碼可以發(fā)現(xiàn)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>';} }

可以看到，點擊鏈接按鈕出現(xiàn)的彈框樣式就在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附件屬性。

除此之外，在中文的轉(zhuǎn)換部分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...

總結(jié)

以上是生活随笔為你收集整理的summernote编辑器插件使用笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。