How to set custom attributes on regular text?
📝 Ask a question
When integrating CKEditor, we will need to track some custom properties on each run of text (including plain text), such as id. Our app cares about individual text run IDs, partly due to our custom track changes. We are hoping to port the whole system over into CKEditor-based editing, but we need those IDs.
Is there a way to do this in CKEditor5? We were hoping that, alongside bold and italic, we could have some kind of data-id attached to each Text node. The input would look something like <span class='paragraph-text' data-id='123'>some text</span>.
We tried mapping span to span with the custom IDs but it just ended up being regular text without any attributes.
We also tried a custom model element e.g. paragraphText, and while that lets us retain the attributes, the result is not editable.
The closest thing I could find was _setAttribute on the Text class. We tried the below converter, but got the error model-position-parent-incorrect.
conversion.for('upcast').elementToElement({
view: {
name: 'span',
classes: 'paragraph-text',
},
model: (viewElement, { writer: modelWriter }) => {
const ourNode = modelWriter.createText('abc');
ourNode._setAttribute('id', viewElement.getAttribute('data-id'));
return ourNode;
}
})
So the real motivation for this is to be able to preserve our track changes. But if we move to a CKEditor-based format, maybe we could get away without the text IDs, provided we preserve (save and load) the track changes. So then the question becomes,
- Are the TCs in an opaque format that would prevent backend conversion to a different format? For example, we want to be able to "accept all changes" in our own content model that we have converted/saved from CKEditor. In other words, we need to be able to convert to and from a TC format that we are able to manipulate outside of the editor. E.g. customer wants to export a document and accept all the changes in the output. (Our current format uses text run IDs, hence this question).
Update: When I tried dumping the data from CKInspector, it looks promising...the suggestion ranges are marked in the output, like
<suggestion-start name="insertion:eb59a6f0eb1e99fa4ca0ef3cf30ba2d73:e2"></suggestion-start>abc <suggestion-end name="insertion:eb59a6f0eb1e99fa4ca0ef3cf30ba2d73:e2">
This is great...I think we can work with it. But we may in future need to be able to identify ranges of plaintext....so I'm still curious whether those are identifiable in any way (original question). Thanks
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).