CODEWITHSUNDEEP
javascriptannotationstinymcewysiwygtinymce-plugins
Karl
Karl

Reputation: 37

How to modify attributes in annotations in TinyMCE

I am trying to modify the data-author of annotation in TinyMCE. The documentation said that :

The TinyMCE Annotations API provides the ability to add, modify, and delete annotations; listen to text selection events and retrieve all annotations with the same annotation name.

I have already annotated my selected words, using the

   editor.annotator.annotate('comment', {
    uid: id,
    author: name
  });

OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\">Advice</span>

In that code, I've successfully annotated the selected words, but for some event, I want to change the author of the annotated words, and here's my code:

   editor.annotator.annotate('comment', {
    uid: id,
    author: newName
  });

OUTPUT:
<span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name1\" data-mce-annotation=\"comment\"><span class=\"mce-annotation\" data-mce-annotation-uid=\"7\" data-mce-annotation-author=\"name2\" data-mce-annotation=\"comment\">Advice</span></span>

I thought since the selected words are already annotated, by using the code above I can change the author. but it's just creating another span inside the original span.

What I want is just to edit or change the data-mce-annotation-author value from other values on some event.

Have anyone tried this issue or experience with this? Thank you very much!

Upvotes: 0

Views: 253

Answers (1)

Karl
Karl

Reputation: 37

I got the solution for this.

You just need to use the Retrieving All Annotations for a Particular Annotation Name

My solution for changing attributes of specific annotator:

const comments = editor.annotator.getAll(this.name);
const comment = comments[id][0];
comment.setAttribute('data-mce-annotation-author', newName);
editor.save();

Upvotes: 0

Related Questions