Summernote多编辑器实例下自定义按钮同时作用于所有实例问题求解

• 给出的自定义按钮代码存在语法错误：click回调中多了冗余的闭合括号});，会导致作用域绑定异常
• 通常是因为将自定义按钮注册到了Summernote全局配置中，所有编辑器实例会复用同一个按钮实例，上下文绑定混乱
• 部分场景是因为多个编辑器初始化时复用了同一个配置对象（引用类型），导致按钮的上下文没有和当前编辑器绑定

1. 首先修正自定义按钮的语法错误，按钮定义可公共复用但不要全局注册

var HelloButton = function (context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="fa fa-child"/> Hello',
    tooltip: 'hello',
    click: function () {
      // 此处context为当前编辑器实例的专属上下文，仅作用于当前实例
      context.invoke('editor.insertText', myCat);
    }
  });
  return button.render();
}

2. 每个编辑器实例初始化时，独立传入按钮配置，不要复用同一个配置对象，也不要做全局注册

// 初始化第一个编辑器
$('#editor1').summernote({
  toolbar: [
    // 其他原有工具栏配置保留，新增自定义按钮项
    ['custom', ['hello']]
  ],
  buttons: {
    hello: HelloButton
  }
});

// 初始化第二个编辑器
$('#editor2').summernote({
  toolbar: [
    ['custom', ['hello']]
  ],
  buttons: {
    hello: HelloButton
  }
});

• 不要执行$.summernote.options.buttons.hello = HelloButton这类全局注册操作，全局注册的按钮会被所有实例共享，极易出现上下文混乱
• 如果是动态生成编辑器，每次初始化时都要生成新的配置对象，不要直接复用同一个配置变量（对象为引用类型，复用会导致配置互相影响）

内容的提问来源于stack exchange，提问作者Schmidl