CKEditor 5 - allow span elements and attributes

Question

I am trying to make a custom plugin with CKEditor 5 Framework. However I am not able to insert (via editor.setData()) any attributes for paragraphs and other elements like span. Is there any way to achieve that?

Thanks!

Answer 1

CKEditor 5 implements a custom data model about which you can read more in the Architecture introduction guide.

The existence of a custom data model means that the editor needs to know how to convert that model to a view structure (the DOM) for editing. Also, since typically the editor outputs HTML (or a structurally "compatible" format as Markdown, BBCode, etc.) similar conversion needs to be done to get the data from the editor. Finally, the editor needs to be able to convert the view to the model so you are able to load data into the editor.

Side note: You might also want to save the model directly into your database which would save you from converting the view to the model (on setData()), but while possible it still means that the editor needs to know how to convert the model to the view for editing and the view to the model for pasting.

What does all this mean? It means that unless a particular piece of content can be picked by an existing editor feature, it will be dropped. It simply won't be converted from the view to the model on data load and hence will be forgotten.

Therefore, it's all about converters. You need to teach your editor how to understand HTML and how to render HTML. Actually, you also need to teach it how these particular pieces of (at this point) the model can be edited (by configuring the schema and implementing a proper UI).

So, how to write converters and configure the schema?

Well, this is a problem at the moment because right now (as of Dec 2017) we're in a middle of a CKEditor 5 engine refactoring. The architecture we have is great but the APIs proved to be too hard to use, so we're now improving them which means that whatever I'd write here would be invalid next month. So, instead, I recommend going through the source of the CKEditor 5 packages (e.g. see the plugins in the basic styles package).