在summernote中的自定义工具栏按钮上插入html的问题

Question

我正在尝试在summernote工具栏中添加2个自定义按钮，1个用于简单地添加换行符，另一个用于插入一些带有小样式的文本。当我使用按钮时，它会清理 html，并且不会执行所需的结果（换行符或插入小文本）。如何从工具栏选择中插入 html 并且不对其进行更改？

这里是渲染 jQuery 的按钮：

var BR_Button = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: 'BR',
    tooltip: 'Line Break',
    click: function () {
      // invoke insertText method with 'hello' on editor module.
      context.invoke('editor.insertText', '<br/>');
    }
  });

  return button.render();   // return button as jquery object
}

var Small_Button = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: 'small',
    tooltip: 'Small Style Emphasis',
    click: function () {
      // invoke insertText method with 'hello' on editor module.
      context.invoke('editor.insertText', '<small>small text</small>');
    }
  });

  return button.render();   // return button as jquery object
}

以及工具栏自定义代码：

$('#id_text').summernote({
		toolbar: [
		['paragraph', ['paragraph']],
		['fontsize', ['style','fontname','fontsize','height']],
		['style', ['bold', 'italic', 'underline', 'clear']],
		['font', ['small','strikethrough', 'superscript', 'subscript']],
		['color', ['color']],
		['para', ['BR','ul', 'ol',]],
		['insert', ['table','link','picture','video','hr']],
		['codeview', ['codeview']],
		],
		focus: true,
		buttons: {
				small: Small_Button,
				BR: BR_Button
				}
		});

问题是当我点击工具栏中的 BR 按钮时，它会插入
，而不是给我一个实际的换行符..

Answer 1

不要使用“editor.insertText”，而是使用“editor.pasteHTML”，这样可以插入 html 而不是强制使用安全字符。

var BR_Button = 函数（上下文）{ var ui = $.summernote.ui;

// 创建按钮 var button = ui.button({ 内容：'BR', tooltip: '插入换行符', 点击：函数（）{ // 在编辑器模块上调用带有 'hello' 的 insertText 方法。 context.invoke('editor.pasteHTML', '
'); } });