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

Question

我正在尝试在 summernote 工具栏中添加 2 个自定义按钮，一个用于简单地添加一个换行符，另一个用于插入一些带有小样式的文本。当我使用这些按钮时，它会清除 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 按钮 = ui.button({ 内容：'BR', 工具提示：'Insert Line Break'，点击：功能（）{ // 在编辑器模块上使用 'hello' 调用 insertText 方法。 context.invoke('editor.pasteHTML', '
'); } });

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

Issues inserting html on custom toolbar button in summernote

jquery

summernote