CKEditor: Media embed plugin does not work correctly

[Dmitrii]

Steps to reproduce

1. Install CKEditor 4.5.4 and Media Embed Plugin
2. Open page with CKEditor (inline mode)
3. Insert link to Twitter post (for example: ​https://twitter.com/CoutinhoTouch/status/602512007099711488)
4. Save the result of work (html-code) in database and update the page.
5. Sometimes inserted content is not show properly. Widget is blank.

Expected result

Embeded Twitter widget

Actual result

blank widget. iframe inside widget contain this string: <!--{cke_protected}%3Cscript%20async%3D%22%22%20charset%3D%22utf-8%22%20src%3D%22%2F%2Fplatform.twitter.com%2Fwidgets.js%22%3E%3C%2Fscript%3E-->

Other details (browser, OS, CKEditor version, installed plugins)

Chrome 45 The problem can be solved by reopen insert widget dialog for that widget and click 'ok' button.

[Jakub Ś]

Save the result of work (html-code) in database and update the page.

CKEditor has nothing to do with saving data in DB as this is JavaScript application.

Please check your server-side code.

[Dmitrii]

The problem is not on the server side. Ok. Refer to the database was a mistake. I prepared file containing HTML code that stored in database. (example1.html) You can reproduce the bug, using it. Sometimes twitter widget is blank when CKEditor is activated for div tag containing that code. (and sometimes not)

[Dmitrii]

You can play with the bug here: ​http://tehnonebo.ru/test/example1.html. When the page is loading you can see twitter widget on top and when the page is loaded the widget is empty (sometimes, not always).

[Jakub Ś]

Ok. Refer to the database was a mistake. I prepared file containing HTML code that stored in database.

But you are still making the same mistake. Taking code from DB means that it might have been already broken (even by e.g. encoding mismatch between your components like DB, server side and HTML pages).

In order to check whether CKEditor is breaking the content is to put that content inside editor using oembed plugin and then switching to source mode nad back. Doing so, you are executing same methods that are used when you press submit button. Anything after submit is not CKEditor responsibility.

From what i have checked, the problematic link is: ​https://twitter.com/KhabKrai/status/649081405528518656. Well... works great. I have created to widgets, moved to source/wysiwyg and nothing happened.

I have tried classic editor, inline, with divarea, and the ajax sample where you destroy/create editor instance. All work as expected.

​https://twitter.com/KhabKrai/status/649081405528518656

[Dmitrii]

Thank you for reply! I think all fine with database and server side too. I checked all steps from getData() method of CKEditor (console output) to database (pgAdmin) and server logic (debugger). Each step contains exactly the same data as CKEditor. (hash comparison) Now i found that the problem is in order of scripts loading. I load initialization script of CKEditor (CKEDITOR.inline('publication-content', ckSettings);) after all content on the page is loaded. Sometimes script of twitter widget that is inserted by Media Embed plugin (<script async="" charset="utf-8" src="platform.twitter.com/widgets.js"></script>) is executed BEFORE the CKEditor initialization and changes the HTML code of widget inside <div> tag, that will be processed by CKEditor later. I think CKEditor tries to parse changed code and generates empty block. If initialization of CKEditor is executed before the code of twitter then all works fine. Now i think it is not a bug.