Как вставить текст в текущую позицию курсора в редакторе Summernote в Angular 12
Описание:
У меня есть редактор Summernote (https://www.npmjs.com/package/ngx-summernote) в моем проекте Angular 12, а также у меня есть кнопка вне редактора. Когда пользователь нажимает на эту кнопку, я хочу вставить текст «Heeello» в текущую позицию курсора в редакторе.
Я попытался получить доступ к объекту редактора через директиву ngx-summernote, но я продолжаю получать ошибки, такие как «Невозможно прочитать свойства неопределенного». Я также просмотрел документацию по API Summernote, но не знаю, как использовать ее в своем проекте Angular.
<div [ngxSummernote] = "config"></div>
Компонент.ts
import { NgxSummernoteDirective } from 'ngx-summernote';
@ViewChild(NgxSummernoteDirective) ngxSummernote: NgxSummernoteDirective;
config = {
placeholder: '',
tabsize: 2,
height: '200px',
uploadImagePath: '/api/upload',
toolbar: [
['misc', ['codeview', 'undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontsize', ['fontname', 'fontsize', 'color']],
['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
['insert', ['table', 'picture', 'link', 'video', 'hr']]
],
fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
}
...
}
addText(){
console.info(this.ngxSummernote);
console.info(this.ngxSummernote['_editor'][0] )
this.ngxSummernote['_editor'].insertText('as');
const currentPosition = this.ngxSummernote['_editor'].sumo.getSelection().index;
console.info(currentPosition)
// const currentCursorPosition = ($(this.mySummernote.nativeElement) as any).summernote('code').length;
// const textToInsert = 'Hello';
}
Ничего из вышеперечисленного не работает. Вот ссылка StackBlitz на мой код: 🔁 https://stackblitz.com/edit/angular-summernote-demo-duemtn?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Может ли кто-нибудь помочь мне понять, как вставить текст в текущую позицию курсора в редакторе Summernote в Angular 12?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
У меня есть что-то, что работает, но это не будет одним из лучших решений. Чтобы вставить текст в текущую позицию курсора в редакторе Summernote в Angular 12, вы можете использовать следующий подход:
Получить текущий выбор и диапазон:
const editableDiv = document.querySelector('.note-editable');
// please check as per the stackblitz demo I saw this as the classname for the editable content area
const sel = window.getSelection();
const range = sel.getRangeAt(0);
const startPos = range.startOffset;
Вставьте HTML в текущую позицию курсора:
range.deleteContents();
const newElem = document.createElement('span');
newElem.innerHTML = htmlToInsert;
range.insertNode(newElem);
Установите позицию курсора в конец вставленного HTML:
range.setStartAfter(newElem);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
editableDiv.focus();
Этот код устанавливает позицию курсора в конец вставленного HTML.
Обновите содержимое редактора и установите положение курсора:
const updatedHtml = editableDiv.innerHTML;
const cursorPosition = startPos + htmlToInsert.length;
const newRange = document.createRange();
newRange.setStart(editableDiv.childNodes[0], cursorPosition);
newRange.setEnd(editableDiv.childNodes[0], cursorPosition);
sel.removeAllRanges();
sel.addRange(newRange);
editableDiv.focus();
Этот код обновляет содержимое редактора, устанавливает положение курсора в конец вставленного текста и фокусируется на редакторе.
Обратите внимание, что этот подход использует объект документа для управления DOM, что не рекомендуется в приложениях Angular. Вместо этого вы должны использовать инкапсуляцию представления и директивы Angular для управления содержимым редактора, но, насколько я могу, в текущей директиве нет доступных методов для вставки содержимого в текущий индекс.