Summernote добавить текст из раскрывающегося списка в конце

У меня есть пользовательская кнопка в 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();
  };
}

Спасибо за помощь.

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
3
0
125
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете попробовать заменить эту строку в функции customButtonGenerator:

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

С:

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

ИЛИ

context.invoke('editor.pasteHTML', '<div>' + $(this).html() + '</div>');

Спасибо за вашу помощь, теперь он добавляет пробел между словами, что лучше. Однако я хотел бы, чтобы текст был добавлен в конце, поэтому, например, когда я нажимаю «один», а затем «два», результат должен быть «Один Два», а не «Два Один».

J.C 20.11.2022 04:20

Замените эту строку

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

С

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

Это решит проблему.

Спасибо за вашу помощь, теперь он добавляет пробел между словами, что намного лучше. Однако я хотел бы, чтобы текст был добавлен в конце, поэтому, например, когда я нажимаю «один», а затем «два», результат должен быть «Один Два», а не «Два Один».

J.C 01.12.2022 15:07

Немного изменил код. Проверь сейчас.

Fida Khattak 02.12.2022 07:43

Спасибо за помощь, к сожалению, это не работает. Он все равно вставит текст в топ stackblitz.com/edit/…

J.C 02.12.2022 14:39

Немного изменил код. Проверь сейчас.

Fida Khattak 02.12.2022 18:21

Да, теперь это работает, большое спасибо за вашу помощь. Хотел бы я также одобрить ваш вопрос, но @dangarfield уже предоставил решение, которое также работает. и с ним легче работать.

J.C 02.12.2022 21:03
Ответ принят как подходящий

Насколько я вижу, эти ответы не совсем правильно понимают вопрос.

Вы должны добавить содержимое кнопки к существующему содержимому следующим образом:

Пример блиц - 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)
    })
  })
}
...

Я посмотрю, есть ли способ отслеживать текущую позицию курсора, я думаю, что он должен быть. Я обновлю, если это возможно, а не просто добавлю в конец.

Использовать положение курсора тоже было бы здорово. Было бы здорово, если бы вы могли, но это был не мой вопрос, поэтому я одобрил ваш ответ. Большое спасибо!

J.C 02.12.2022 16:27

Вы можете, используя summernote.org/deep-dive/#range--selection-api. Однако в этом случае требуется отслеживать множество узлов (например, чтобы вы могли выделить текст жирным шрифтом и т. д.). Но это выходит за рамки этого вопроса

dangarfield 02.12.2022 16:29

Другие вопросы по теме