CKEditor 5 comments: preserve the discussion and its document anchor

CKEditor 5 comments needs document markers, comment-thread records, and the users those records reference. Saving only editor.getData() preserves the marked document without necessarily preserving the discussion. For standalone comments, integrate CommentsRepository with your storage; real-time collaboration has a separate integration path. Comments is a premium feature requiring the corresponding license. Comments integration

In an original purchasing brief, a reviewer selects “Delivery within five working days” and asks whether the supplier confirmed that promise. The question should remain attached to the sentence after reopening. Resolving the thread should archive the discussion without silently turning the promise into an approved contractual term.

Decide which integration owns the discussion

Use the standalone integration when your application loads and saves review data itself. CKEditor documents a simple load-and-save approach and an adapter that persists individual comment operations. It recommends the adapter for greater control over storage and validation.

A real-time collaboration installation should follow its collaboration integration instead of attaching a second independent persistence mechanism from a standalone example. A visible sidebar does not establish which backend stores a comment or whether another participant can access it.

Prepare the Comments feature, license configuration, toolbar controls, users integration, and chosen annotation display mode using the official setup for your editor version. A sidebar also needs an actual container. Inline annotations are a separate presentation choice, especially on a narrow authoring screen. Comments overview

Capture the linked data deliberately

For an initialized standalone editor, this documented snapshot pattern captures attached, nonempty threads alongside document content:

const repository = editor.plugins.get('CommentsRepository');
const reviewSnapshot = {
  content: editor.getData(),
  commentThreads: repository.getCommentThreads({
    skipNotAttached: true,
    skipEmpty: true,
    toJSON: true
  })
};

This creates an in-memory object. Your application's authorized save route must commit it and report the real outcome. Define whether your archive must also retain unlinked threads before adopting these filters: a snapshot restricted to attached threads is not a complete history export.

The editor data contains markers referencing thread IDs. Keep that editable representation intact in storage. Load the corresponding users and comment-thread records during initialization through the documented Users and CommentsRepository APIs. A thread's author ID must resolve to the intended person; a display name alone is not stable authorship.

Do not replace the editable store with output created using getData({ showCommentHighlights: true }). CKEditor documents that representation for previews and explicitly says it cannot be loaded back through setData().

Make adapter success mean a successful storage operation

When using an adapter, implement the comment operations your feature exposes. Each asynchronous method returns a promise; resolve after the server accepts and stores the operation, and reject when it fails. The integration can then represent pending and failed work instead of claiming that a newly visible comment is already safe to close.

The server must enforce who may read the brief, edit a comment, resolve a thread, or delete another author's contribution. It should set authoritative identity and timestamps through its own trusted session and storage policy. Hiding a sidebar action does not enforce those rules.

Comment persistence and document-content persistence also need a consistency plan. A saved thread whose marker was removed by a later HTML cleanup step may no longer point to the delivery sentence. Inspect both records when an anchor disappears.

Reopen the unresolved question before closing the review

In a development copy, attach the supplier-confirmation question to the delivery promise and add a reply from a second authorized reviewer. Save, close, and reopen the purchasing brief. Check the exact anchor, both authors, and the reply order.

Resolve that thread and verify that the configured archive can find it. Restore it in a separate check if the application exposes that action. Then interrupt a save or deny a comment operation and confirm the author sees the actual failure. On a narrow screen, open the thread and read the selected promise without the annotation covering the sentence.

Track changes preserves proposed wording and accept/discard state. Comments preserves discussion around the wording. End this review by recording the supplier's actual answer and revising the promise through the brief's approval process; resolving a question alone does not confirm delivery.

Keep reading