Summernote下拉项文本插入位置及顺序异常问题求助

问题描述 #

我在Summernote中自定义了一个带有下拉选项（"one"、"two"、"three"）的按钮。点击"one"时文本添加在开头，这本身没问题，但后续点击"two"时，文本同样被添加在开头，结果为：

twoone

我期望得到如下结果：

one
two

更新尝试 #

当我使用以下代码行：

context.invoke("editor.pasteHTML", context.modules.editor.$editable[0].innerText ? "<br>" + $(this).html() : $(this).html() );

替代原来的：

context.invoke('editor.insertText', $(this).html());

结果有所改善，但顺序仍不正确：

two
one

自定义按钮代码 #

function customButtonGenerator(lstQuoteComments, title) {
  return function (context) {
    const ui = ($ as any).summernote.ui;

    var i;
    var listHtml = '';
    for (i = 0; i < lstQuoteComments.length; i++) {
      listHtml += '<li>' + lstQuoteComments[i] + '</li>';
    }

    const button = ui.buttonGroup([
      ui.button({
        className: 'dropdown-toggle',
        contents:
          '<i class="fa fa-comments text-primary"/><span id="summernot-caret" class="caret text-primary"></span>',
        //tooltip: 'Comments', //Not working when hover over it top is not defined
        data: {
          toggle: 'dropdown',
        },
      }),
      ui.dropdown({
        className: 'drop-default summernote-list',
        contents:
          '<div id="container-comentario"><div id="dialog" title="' +
          title +
          '" ><h1 class="header-comentario">' +
          title +
          '</h1><ul id="summernote-list"><ul>' +
          listHtml +
          '</ul></div></div>',
        callback: function ($dropdown) {
          $dropdown.find('li').each(function () {
            $(this).click(function () {
              context.invoke('editor.insertText', $(this).html());
            });
          });
        },
      }),
    ]);
    return button.render();
  };
}

解决方案 #

方法1：定位光标到内容末尾后插入 #

核心思路是先将光标移动到编辑器现有内容的最后，再执行插入操作，确保新内容追加到末尾并自动换行：

$(this).click(function () {
  const editor = context.modules.editor;
  const content = editor.$editable[0].innerText.trim();
  const insertText = content ? '\n' + $(this).html() : $(this).html();

  // 创建范围并移动到内容末尾
  const range = $.summernote.range.create();
  range.selectNodeContents(editor.$editable[0]).collapse(false);
  editor.selection.setRange(range);

  // 插入文本
  context.invoke('editor.insertText', insertText);
});

方法2：直接追加HTML内容 #

如果不需要处理光标位置，可直接获取编辑器当前HTML内容，追加新内容后重新赋值：

$(this).click(function () {
  const editor = context.modules.editor;
  const currentHtml = editor.$editable.html().trim();
  const newHtml = currentHtml ? `${currentHtml}<br>${$(this).html()}` : $(this).html();
  
  editor.$editable.html(newHtml);
});

内容的提问来源于stack exchange，提问作者J.C