I am accessing an instance of a webpage’s ckEditor like this
const ckEditorElement = document.activeElement;
const ckEditorInstance = ckEditorElement?.ckeditorInstance;
So far I inserted content using insertContent
, but the problem is that if I am inserting an <img>
element it ignores the width/height styling of it.
const text = '<p>Some text before '
+ <img src="https://www.example.com/someImg200x200.png" width="100" height="100" />
+ ' Some text after</p>';
ckEditorInstance.model.change((writer) => {
const viewFragment = ckEditorInstance.data.processor.toView(text);
const modelFragment = ckEditorInstance.data.toModel(viewFragment);
writer.model.insertContent(modelFragment, ckEditorInstance.model.document.selection);
});
The editor I am trying to do this in has like 40 plugins which include Image
, ImageResize
, ZendeskImagePlugin
, but I could not resolve this issue with the information found in CKEditor5 documentation.