對summernote官方文檔的翻譯，有錯誤之處歡迎高手指正 模塊化 summernote通過模塊化支持功能的擴展。這種模塊體系的建立受益于spring框架的啟發。 關鍵術語 Module：模塊 Context：Context包含modules和editor’s 聲明的容器 Renderer：Renderer是用來創建元素的方法 UI：UI是用來新建ui元素的渲染函數 Module Module是用來擴展功能的組件，具有生命周期，也有輔助函數和依賴于生命周期的函數 initialize 通過$(‘..’).summernote()進行初始化的時候會調用這個函數，可以用來在editor中綁定事件和創建元素 ~~~ this.initialize = function () { // create button var button = ui.button({ className: 'note-btn-bold', contents: '<i class="fa fa-bold">' click: function (e) { context.invoke('editor.bold'); // 調用editor中的bold方法 } }); // button.render()返回button生成的jquery對象 this.$button = button.render(); $toolbar.append(this.$button); } ~~~ destroy 當$(‘..’).summernote(‘destroy’)的時候調用這個方法，移除initlize即初始化時創建的元素，并解綁事件 ~~~ this.destroy = function () { this.$button.remove(); this.$button = null; } ~~~ shouldInitialize 這個方法來決定模塊是否會被初始化 ~~~ // AirPopover's shouldInitialize this.shouldInitialize = function () { return options.airMode && !list.isEmpty(options.popover.air); }; ~~~ 下面是AutoLink 模塊的完整代碼 ~~~ // Module Name is AutoLink // @param {Object} context - states of editor var AutoLink = function (context) { // you can get current editor's elements from layoutInfo var layoutInfo = context.layoutInfo; var $editor = layoutInfo.editor; var $editable = layoutInfo.editable; var $toolbar = layoutInfo.toolbar; // ui is a set of renderers to build ui elements. var ui = $.summernote.ui; // this method will be called when editor is initialized by $('..').summernote(); // You can attach events and created elements on editor elements(eg, editable, ...). this.initialize = function () { // create button var button = ui.button({ className: 'note-btn-bold', contents: '<i class="fa fa-bold">' click: function (e) { // invoke bold method of a module named editor context.invoke('editor.bold'); } }); // generate jQuery element from button instance. this.$button = button.render(); $toolbar.append(this.$button); } // this method will be called when editor is destroyed by $('..').summernote('destroy'); // You should detach events and remove elements on `initialize`. this.destroy = function () { this.$button.remove(); this.$button = null; } }; ~~~ 配置模塊 可以通過option自定義模塊 ~~~ $(".summernote").summernote({ modules: { myModule: MyModule } }); ~~~ 可以通過暴露的API來調用自定義模塊中的方法 ~~~ $(".summernote").summernote("myModule.method", 'hello'); ~~~ Plugin 可以以插件形式來自定義模塊 ~~~ // src/mymodule.js $.extend($.summernote.plugins, { myModule: function (context) { // define module ... } }); ~~~