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();
};
}
Спасибо за помощь.
Ответы 3
Вы можете попробовать заменить эту строку в функции customButtonGenerator:
context.invoke('editor.insertText', $(this).html());
С:
context.invoke('editor.pasteHTML', $(this).html());
ИЛИ
context.invoke('editor.pasteHTML', '<div>' + $(this).html() + '</div>');
Замените эту строку
context.invoke('editor.insertText', $(this).html());
С
context.invoke("code", context.modules.editor.$editable[0].innerHTML + '<br>' + $(this).html());
Это решит проблему.
Спасибо за вашу помощь, теперь он добавляет пробел между словами, что намного лучше. Однако я хотел бы, чтобы текст был добавлен в конце, поэтому, например, когда я нажимаю «один», а затем «два», результат должен быть «Один Два», а не «Два Один».
Немного изменил код. Проверь сейчас.
Спасибо за помощь, к сожалению, это не работает. Он все равно вставит текст в топ stackblitz.com/edit/…
Немного изменил код. Проверь сейчас.
Да, теперь это работает, большое спасибо за вашу помощь. Хотел бы я также одобрить ваш вопрос, но @dangarfield уже предоставил решение, которое также работает. и с ним легче работать.
Насколько я вижу, эти ответы не совсем правильно понимают вопрос.
Вы должны добавить содержимое кнопки к существующему содержимому следующим образом:
Пример блиц - 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)
})
})
}
...
Я посмотрю, есть ли способ отслеживать текущую позицию курсора, я думаю, что он должен быть. Я обновлю, если это возможно, а не просто добавлю в конец.
Использовать положение курсора тоже было бы здорово. Было бы здорово, если бы вы могли, но это был не мой вопрос, поэтому я одобрил ваш ответ. Большое спасибо!
Вы можете, используя summernote.org/deep-dive/#range--selection-api. Однако в этом случае требуется отслеживать множество узлов (например, чтобы вы могли выделить текст жирным шрифтом и т. д.). Но это выходит за рамки этого вопроса
Спасибо за вашу помощь, теперь он добавляет пробел между словами, что лучше. Однако я хотел бы, чтобы текст был добавлен в конце, поэтому, например, когда я нажимаю «один», а затем «два», результат должен быть «Один Два», а не «Два Один».