Angular中QuillEditor光标随机跳至编辑器开头问题求助

你的Quill编辑器光标跳至开头的问题，核心原因是双向绑定与手动内容操作的冲突，加上不安全的内容更新方式破坏了编辑器的内部状态：

• 模板里的[(ngModel)]="editorContent"会在editorContent变化时自动触发Quill重新渲染内容，而你在编辑器内容变更、WebSocket回调里又手动修改editorContent，形成更新循环，导致光标位置被强制重置。
• 使用dangerouslyPasteHTML直接替换内容，会破坏Quill的内部文档结构，频繁操作时极易引发光标定位异常。

修复步骤 #

1. 修改模板：移除双向绑定

将自动同步的双向绑定改为单向内容绑定，手动处理用户输入的内容同步：

<div class="document-container">
  <div class="editor-container">
    <quill-editor
      [content]="editorContent"
      (onContentChanged)="handleEditorContentChange($event)"
    >
    </quill-editor>
  </div>
</div>

2. 调整组件逻辑：消除更新冲突

使用Quill官方API安全更新内容，优化光标恢复逻辑，避免循环更新：

@Component({
  selector: 'app-document',
  imports: [QuillModule, FormsModule, ReactiveFormsModule],
  templateUrl: './document.component.html',
  styleUrl: './document.component.css'
})
export class DocumentComponent implements OnInit, OnDestroy, AfterViewInit{
  documentId: string = '';
  editorContent: string = '';
  hasUnsavedChanges = false;
  titleControl = new FormControl('Nowy dokument');
  @ViewChild(QuillEditorComponent) editor!: QuillEditorComponent;
  private titleChangeSub: Subscription | undefined;
  private saveInProgress = false;
  private websocketUpdateSub: Subscription | undefined;
  private routeSub: Subscription | undefined;

  constructor(
    private route: ActivatedRoute,
    private documentService: DocumentService,
    private websocketService: WebsocketService) {}

  ngOnInit() {
    this.routeSub = this.route.params.subscribe(params => {
      this.documentId = params['id'];
      this.websocketService.connectToDocument(this.documentId);
      if(this.documentId) this.loadDocument();
      
      // 处理WebSocket内容更新
      this.websocketUpdateSub = this.websocketService.onContentUpdate.subscribe(update => {
        if (this.editorContent !== update.content || this.titleControl.value !== update.title) {
          this.titleControl.setValue(update.title, { emitEvent: false });
          
          if (this.editor?.quillEditor) {
            const quill = this.editor.quillEditor;
            const selection = quill.getSelection();
            
            // 用setContents安全更新内容，避免破坏文档结构
            quill.setContents(quill.clipboard.convert({ html: update.content }), 'silent');
            
            // 恢复光标位置，确保不超出内容长度
            if (selection) {
              const safeIndex = Math.min(selection.index, quill.getLength() - 1);
              quill.setSelection(safeIndex, selection.length);
            }
            
            this.editorContent = quill.root.innerHTML;
          }
        }
      });
    });

    this.titleChangeSub = this.titleControl.valueChanges
      .pipe(debounceTime(2000))
      .subscribe(() => {
        if(this.documentId && !this.saveInProgress) this.saveDocument();
      })
  }

  ngAfterViewInit() {
    // 初始化编辑器内容
    if (this.editor?.quillEditor && this.editorContent) {
      this.editor.quillEditor.setContents(
        this.editor.quillEditor.clipboard.convert({ html: this.editorContent }),
        'silent'
      );
    }
  }

  // 处理用户输入的内容变化
  handleEditorContentChange(change: any) {
    if (change.source === 'user' && this.editor?.quillEditor) {
      this.editorContent = this.editor.quillEditor.root.innerHTML;
      this.hasUnsavedChanges = true;
      
      this.websocketService.sendContentUpdate(
        this.editorContent,
        this.titleControl.value || 'Untitled'
      );
      
      if(this.documentId && !this.saveInProgress){
        this.saveDocument();
      }
    }
  }

  ngOnDestroy() {
    this.routeSub?.unsubscribe();
    this.titleChangeSub?.unsubscribe();
    this.websocketUpdateSub?.unsubscribe();
  }

  @HostListener('window:beforeunload',['$event'])
  async beforeUnloadHandler(event: BeforeUnloadEvent){
    if(this.documentId && !this.saveInProgress){
      event.returnValue = false;
      try{
        this.saveInProgress = true;
        await this.documentService.updateDocument(
          this.documentId,
          this.editorContent,
          this.titleControl.value || 'untitled'
        ).toPromise()
      } finally {
        this.saveInProgress = false;
      }
    }
  }

  loadDocument() {
    this.documentService.getDocument(this.documentId).subscribe(
      document => {
        this.editorContent = document.content;
        this.titleControl.setValue(document.title, { emitEvent: false });
        
        if (this.editor?.quillEditor) {
          this.editor.quillEditor.setContents(
            this.editor.quillEditor.clipboard.convert({ html: document.content }),
            'silent'
          );
        }
      },
      err => {
        console.error(err);
      }
    );
  }

  saveDocument(){
    this.saveInProgress = true;
    this.documentService.updateDocument(
      this.documentId,
      this.editorContent,
      this.titleControl.value || 'untitled'
    ).subscribe(
      () => {
        this.saveInProgress = false;
      },
      err => {
        console.error(err);
        this.saveInProgress = false;
      }
    );
  }
}

关键修改说明 #

• 移除双向绑定：消除editorContent变化时Quill自动重新渲染的触发逻辑，手动控制内容更新时机，避免循环更新。
• 使用setContents更新内容：替代dangerouslyPasteHTML，保留Quill内部文档结构，减少光标异常；'silent'参数避免触发额外的内容变更事件。
• 优化光标恢复：更新内容前记录光标位置，恢复时确保位置不超出内容长度，防止光标越界。
• 清理订阅：统一管理订阅对象，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Hubert Kiszka