Question 35931 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Summernote add text from dropdown at the end – Jquery

I have a custom button in summernote that has a dropdown of items "one", "two", "three" when I click on for example the text "one" the text is added at the start which is fine. But then when I click on "two" afterwards the text is also added at the start which produces this result.

twoone

I would like to have the following result

one
two

Update when I use this line

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

instead of

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

I get the following result wihch is better but the order is still incorrect

two
one

Here you can fiddle with my code

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

Otherwise here is my code for the button that inserts the text

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

Thank you for your help.

Tags:

3

Answers


  1. 0

    You can try to replace this line in customButtonGenerator function:

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

    With:

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

    OR

    context.invoke('editor.pasteHTML', '<div>' + $(this).html() + '</div>');
    Login or Signup to reply.
  2. 0

    Replace this line

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

    with

    context.invoke("code",  context.modules.editor.$editable[0].innerHTML + '<br>' + $(this).html());

    This will solve the issue.

    Login or Signup to reply.
  3. 0

    As far as I can see, these answer don’t quite get the question right.

    You should append the button content to the existing content like this:

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

    Main code snippet:

    ...
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)
    })
  })
}
...

    I’ll have a look if there is a way to keep track of the current cursor position, I think there must be. I’l update if that’s possible, rather than just adding to the end.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search