基礎API（editor模塊） 使用summernote初始化編輯器 ~~~ $('#summernote').summernote(); ~~~ 然后可以使用summernote調用編輯器提供的API。下面是一個插入文本的示例代碼。 ~~~ $('#summernote').summernote('editor.insertText', 'hello world')); ~~~ 它調用了editor模塊的‘insertText’函數，第一個參數是代表模塊及其方法的字符串，其余的是需要傳入方法的參數。 第一個參數沒有模塊名的情況下，會默認為editor。 ~~~ $('#summernote').summernote('insertText', 'hello world'); ~~~ editor模塊中支持以下方法 createRange 為用戶當前選中的內容創建一個范圍對象。 ~~~ var range = $('#summernote').summernote('createRange'); ~~~ saveRange, restoreRange 保存當前用戶選中的內容 ~~~ $('#summernote').summernote('saveRange'); ~~~ 重新保存選中的區域 ~~~ $('#summernote').summernote('saveRange'); // move cursor and select another $('#summernote').summernote('restoreRange'); ~~~ undo, redo 撤銷和恢復最后一個命令 ~~~ $('#summernote').summernote('undo'); $('#summernote').summernote('redo'); ~~~ focus 為編輯器設置焦點 ~~~ $('#summernote').summernote('focus'); ~~~ isEmpty 返回編輯器中內容是否為空 編輯區域獲取焦點時會自動生成，即使并沒有實際內容。所以summernote提供了這個方法來判斷內容是否真的為空。 ~~~ if ($('#summernote').summernote('isEmpty')) { alert('contents is empty'); } ~~~ reset（重置） 清除內容和存儲記錄 ~~~ $('#summernote').summernote('reset'); ~~~ disable, enable disable使編輯器處于不可用狀態。 ~~~ $('#summernote').summernote('disable'); ~~~ 調用enable可以使編輯器從不可以轉換到可用狀態。 ~~~ $('#summernote').summernote('enable'); ~~~ 字體樣式API bold, italic, underline, strikethrough 設置編輯器所有內容的字體樣式。 ~~~ $('#summernote').summernote('bold');//加粗 $('#summernote').summernote('italic');//斜體 $('#summernote').summernote('underline');//下劃線 $('#summernote').summernote('strikethrough');//刪除線 ~~~ superscript, subscript（上角標，下角標） ~~~ $('#summernote').summernote('superscript'); $('#summernote').summernote('subscript'); ~~~ removeFormat（清除樣式） ~~~ $('#summernote').summernote('removeFormat'); ~~~ backColor, foreColor（背景色，前景色） ~~~ // @param {String} color $('#summernote').summernote('backColor', 'red'); // @param {String} color $('#summernote').summernote('foreColor', 'blue'); ~~~ fontName（字體） ~~~ // @param {String} fontName $('#summernote').summernote('fontName', 'Arial'); ~~~ fontSize（字體大小） ~~~ // @param {Number} font size - unit is px $('#summernote').summernote('fontSize', 20); ~~~ Paragraph API justify left, right and more 設置段落居中樣式 ~~~ $('#summernote').summernote('justifyLeft'); $('#summernote').summernote('justifyRight'); $('#summernote').summernote('justifyCenter'); $('#summernote').summernote('justifyFull'); ~~~ insertParagraph（插入段落） ~~~ $('#summernote').summernote('insertParagraph'); ~~~ insertOrderedList（插入列表） ~~~ $('#summernote').summernote('insertOrderedList'); ~~~ ~~~ $('#summernote').summernote('insertUnorderedList'); ~~~ indent and outdent（縮進和凸排） ~~~ $('#summernote').summernote('indent'); $('#summernote').summernote('outdent'); ~~~ formatPara 將編輯器內容格式化為段落 ~~~ $('#summernote').summernote('formatPara'); ~~~ format H1-H6 ~~~ $('#summernote').summernote('formatH2'); $('#summernote').summernote('formatH6'); ~~~ lineHeight（設置行高） ~~~ // @param {Number} line height - unit is px $('#summernote').summernote('lineHeight', 20); ~~~ Insertion API insertImage（插入圖片） ~~~ // @param {String} url // @param {String|Function} filename - optional $('#summernote').summernote('insertImage', url, filename); ~~~ 你也可以把第二個參數設置為回調函數來對上傳的圖片進行修改 ~~~ $('#summernote').summernote('insertImage', url, function ($image) { $image.css('width', $image.width() / 3); $image.attr('data-filename', 'retriever'); }); ~~~ insertNode 插入元素和文本節點 ~~~ var node = document.createElement('div'); // @param {Node} node $('#summernote').summernote('insertNode', node); ~~~ insertText（插入文本） ~~~ // @param {String} text $('#summernote').summernote('insertText', 'Hello, world'); ~~~ createLink, unlink（創建、取消鏈接） ~~~ // @param {String} text - link text // @param {String} url - link url // @param {Boolean} newWindow - whether link's target is new window or not $('#summernote').summernote('createLink', { text: 'This is the Summernote's Official Site', url: 'http://summernote.org', newWindow: true }); $('#summernote').summernote('unlink'); ~~~ Callbacks summernote支持初始化回調函數和jquery自定義事件的回調函數 在V0.7.0之后的版本中callback選項配置的位置變化了。 在V0.7.0之后的版本中callback應該被callbacks對象包裹。 在V0.6.5之后的版本中事件的回調函數鍵值必須使用駝峰命名法。 在V0.6.5之前的版本中基本的事件命名（比如：oninit,onenter,onfocus,onblur,onkeyup,onkeydown,onpaste）都是使用小寫字符串，但是在Callbacks中的對高級特性的事件回調函數命名使用駝峰命名法，這樣就造成了命名不一致，更加混亂。所以我們把所有的小寫的callback改成了駝峰命名法。 onInit ~~~ // onInit callback $('#summernote').summernote({ callbacks: { onInit: function() { console.log('Summernote is launched'); } } }); // summernote.init $('#summernote').on('summernote.init', function() { console.log('Summernote is launched'); }); ~~~ onEnter ~~~ // onEnter callback $('#summernote').summernote({ callbacks: { onEnter: function() { console.log('Enter/Return key pressed'); } } }); // summernote.enter $('#summernote').on('summernote.enter', function() { console.log('Enter/Return key pressed'); }); ~~~ onFocus, onBlur ~~~ // onFocus callback $('#summernote').summernote({ callbacks: { onFocus: function() { console.log('Editable area is focused'); } } }); // summernote.focus $('#summernote').on('summernote.focus', function() { console.log('Editable area is focused'); }); ~~~ onKeyup, onKeydown ~~~ // onKeyup callback $('#summernote').summernote({ callbacks: { onKeyup: function(e) { console.log('Key is released:', e.keyCode); } } }); // summernote.keyup $('#summernote').on('summernote.keyup', function(we, e) { console.log('Key is released:', e.keyCode); }); ~~~ ~~~ // onKeydown callback $('#summernote').summernote({ callbacks: { onKeydown: function(e) { console.log('Key is downed:', e.keyCode); } } }); // summernote.keydown $('#summernote').on('summernote.keydown', function(we, e) { console.log('Key is downed:', e.keyCode); }); ~~~ onPaste ~~~ // onPaste callback $('#summernote').summernote({ callbacks: { onPaste: function(e) { console.log('Called event paste'); } } }); // summernote.paste $('#summernote').on('summernote.paste', function(e) { console.log('Called event paste'); }); ~~~ onImageUpload 重寫圖片上傳方法 ~~~ // onImageUpload callback $('#summernote').summernote({ callbacks: { onImageUpload: function(files) { // upload image to server and create imgNode... $summernote.summernote('insertNode', imgNode); } } }); // summernote.image.upload $('#summernote').on('summernote.image.upload', function(we, files) { // upload image to server and create imgNode... $summernote.summernote('insertNode', imgNode); }); ~~~ onChange ~~~ // onChange callback $('#summernote').summernote({ callbacks: { onChange: function(contents, $editable) { console.log('onChange:', contents, $editable); } } }); // summernote.change $('#summernote').on('summernote.change', function(we, contents, $editable) { console.log('summernote\'s content is changed.'); }); ~~~ Custom button（自定義按鈕） summernote也支持自定義按鈕。如果你想要創建你自己的按鈕，可以定義新按鈕并在options中配置它。 定義按鈕 使用$.summernote.ui創建button對象，按鈕具有以下屬性： contents:在按鈕中顯示的內容 tooltip:鼠標懸浮時的提示文字 click:按鈕被點擊時的回調函數 下面是一個插入“hello”按鈕的示例代碼 ~~~ var HelloButton = function (context) { var ui = $.summernote.ui; // create button var button = ui.button({ contents: '<i class="fa fa-child"/> Hello', tooltip: 'hello', click: function () { // invoke insertText method with 'hello' on editor module. context.invoke('editor.insertText', 'hello'); } }); return button.render(); // return button as jquery object } ~~~ 將按鈕作為jquery對象返回renderr（） Using button with options（在配置項中使用按鈕） 在工具欄中使用button。首先，定義一個鍵為buttons的button對象，然后在工具欄中定義定制的按鈕 ~~~ $('.summernote').summernote({ toolbar: [ ['mybutton', ['hello']] ], buttons: { hello: HelloButton } }); ~~~ 同樣也可以在POPover中使用自定義按鈕