Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#13823 closed Bug (invalid)

CKEditor: Media embed plugin does not work correctly

Reported by: Dmitrii Owned by:
Priority: Normal Milestone:
Component: General Version: 4.5.4
Keywords: Cc:

Description

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.

Attachments (4)

build-config.js (2.1 KB) - added by Dmitrii 3 years ago.
article-edit-ckeditor-settings.js (2.6 KB) - added by Dmitrii 3 years ago.
example.html (11.1 KB) - added by Dmitrii 3 years ago.
example1.html (11.1 KB) - added by Dmitrii 3 years ago.

Download all attachments as: .zip

Change History (9)

Changed 3 years ago by Dmitrii

Attachment: build-config.js added

Changed 3 years ago by Dmitrii

comment:1 Changed 3 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

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.

Changed 3 years ago by Dmitrii

Attachment: example.html added

comment:2 Changed 3 years ago by 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 (<div data-oembed-url="https://twitter.com/VShport/status/649894625516367872">) is blank when CKEditor is activated for div tag containing that code. (and sometimes not)

Last edited 3 years ago by Dmitrii (previous) (diff)

Changed 3 years ago by Dmitrii

Attachment: example1.html added

comment:3 Changed 3 years ago by 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).

comment:4 Changed 3 years ago by 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

comment:5 Changed 3 years ago by 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.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy