javascript - Summernote 在末尾添加下拉列表中的文本

Question

我在 summernote 中有一个自定义按钮，当我点击例如文本“一”时，它有一个项目“一”、“二”、“三”的下拉列表，文本被添加在开头，这很好。但是当我之后点击“两个”时，文本也会添加到产生这个结果的开头。

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

在这里你可以摆弄我的代码

https://stackblitz.com/edit/angular-summernote-demo-n7xn2n?file=src%2Fapp%2Fapp.component.ts

否则这是我的插入文本按钮的代码

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 howver 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();
  };
}

感谢您的帮助。

Answer 1

据我所知，这些答案并没有完全正确地回答问题。

您应该像这样将按钮内容附加到现有内容:

Blitz 示例 - https://stackblitz.com/edit/angular-summernote-demo-ycvten?file=src%2Fapp%2Fapp.component.ts

主要代码片段:

...
callback: function ($dropdown) {
  $dropdown.find('li').each(function () {
    $(this).click(function () {
      let newHtml = context.modules.editor.$editable[0].innerHTML
      if (newHtml !== '') {
        newHtml += '<br>'
      }
      newHtml += $(this).html()
      context.invoke('code', newHtml)
    })
  })
}
...

我会看看是否有一种方法可以跟踪当前光标位置，我想一定有。如果可能的话，我会更新，而不是仅仅添加到最后。