close

Filter

loading table of contents...

Studio Developer Manual / Version 2304

Table Of Contents

10.2.3 Debugging CKEditor 4

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>"}

Example 10.48.  ckdebug, non-verbose


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>"}

Example 10.49.  ckdebug, verbose


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:

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.