如何在 Angular 12 的 Summernote 编辑器中的当前光标位置插入文本

Question

描述：

我的 Angular 12 项目中有一个 Summernote 编辑器 (https://www.npmjs.com/package/ngx-summernote)，并且在编辑器之外还有一个按钮。当用户单击此按钮时，我想在编辑器中的当前光标位置插入文本“Heeello”。

我尝试通过 ngx-summernote 指令访问编辑器对象，但我不断收到“无法读取未定义的属性”之类的错误。我还查看了 Summernote API 文档，但我不确定如何在我的 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.log(this.ngxSummernote);
    console.log(this.ngxSummernote['_editor'][0] )

    this.ngxSummernote['_editor'].insertText('as');
    const currentPosition = this.ngxSummernote['_editor'].sumo.getSelection().index;
    console.log(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

有人可以帮我弄清楚如何在 Angular 12 的 Summernote 编辑器中的当前光标位置插入文本吗？

Answer 1

我有一些有效的方法，但它不会是最好的解决方案之一。要在 Angular 12 的 Summernote 编辑器中的当前光标位置插入文本，可以使用以下方法：

获取当前选择和范围：

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 的视图封装和指令来操作编辑器内容，但据我所知，当前指令中没有可用的方法来在当前索引处插入内容。

Answer 2

试试这个

const summernoteInstance = (<any>$(#editorId)); // your text editor id also you can try with angular approch 

summernoteInstance.summernote('editor.saveRange');
summernoteInstance.summernote('editor.restoreRange');
summernoteInstance.summernote('editor.focus');
summernoteInstance.summernote('editor.insertText', value); // text you want to insert