CKEditor 4 provides a mechanism to transform CKEditor's HTML (also known as “view”) into the data format used for storing the text and vice versa. CoreMedia Studio uses CKEditor data processing to transform CoreMedia Rich Text 1.0 to CKEditor's HTML and vice versa.

CKEditor 4 data processing is split into 15 stages. At each stage different artifacts are available for transformation. Data processing in CoreMedia Studio involves several stages to process links, transform headings, etc.

If you want to further adapt the data processing or need to configure a CKEditor 4 plugin that interacts with data processing, it might be helpful to see the different stages of data processing in the browser's developer tools.

To see the different stages of data processing, start CoreMedia Studio with the URL hash parameter ckdebug. To see every single stage of data processing, use the URL hash parameter ckdebug=verbose. Example: http://localhost:3000/#ckdebug=verbose

coreMediaRichTextArea-1434:toDataFormat/1 (Input):
 Object {value: "<p>This is a <strong>ckdebug</strong> example.</p>"}
coreMediaRichTextArea-1434:toDataFormat/15 (Output):
 Object {value: "<div xmlns="http://www.coremedia.com/2003/richtext… is a <strong>ckdebug</strong> example.</p></div>"}

coreMediaRichTextArea-1434:toHtml/1:
  Object {value: "<?xml version="1.0" encoding="utf-8"?><div xmlns=… is a <strong>ckdebug</strong> example.</p></div>"}
coreMediaRichTextArea-1434:toHtml/2:
 Object {value: "<?xml version="1.0" encoding="utf-8"?><div xmlns=… is a <strong>ckdebug</strong> example.</p></div>"}
coreMediaRichTextArea-1434:toHtml/3:
 Object {value: "<div xmlns="http://… is a <strong>ckdebug</strong> example.</p></div>"}
coreMediaRichTextArea-1434:toHtml/4:
 Object {value: "<div xmlns="http://… is a <strong>ckdebug</strong> example.</p></div>"}
coreMediaRichTextArea-1434:toHtml/5:
 Object {value: C…R.h…r.element, asHtml: "<div xmlns="http://… is a <strong>ckdebug</strong> example.</p></div>"}
coreMediaRichTextArea-1434:toHtml/6:
 Object {value: C…R.h…r.element, asHtml: "<p>This is a <strong>ckdebug</strong> example.</p>"}
coreMediaRichTextArea-1434:toHtml/7:
...
coreMediaRichTextArea-1434:toHtml/14:
 Object {value: C…R.h…r.element, asHtml: "<p>This is a <strong>ckdebug</strong> example.</p>"}
coreMediaRichTextArea-1434:toHtml/15:
 Object {value: "<p>This is a <strong>ckdebug</strong> example.</p>"}

In the examples (Example 10.48, “ ckdebug, non-verbose ” and Example 10.49, “ ckdebug, verbose ”) you see an example output where toHtml is the direction when transforming CoreMedia Rich Text 1.0 from server into CKEditor's HTML and toDataFormat is the direction when storing CKEditor's HTML as CoreMedia Rich Text 1.0 on the server.

For additional reference of CKEditor 4 data processing it is recommended that you read the corresponding documentation of the events of CKEDITOR.editor in CKEditor 4 API docs: