Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

Tips: Media (oEmbed) plugin with CKEditor4 plugin

+5 votes
839 views
asked Oct 1, 2014 in Plugins by sama55
edited Oct 2, 2014 by sama55

1. Install my CKEditor4 plugin for Q2A

2. Install Line Utilities plugin (Choose version in accord with your CKEditor version)

3. Install Widget plugin ( (Choose version in accord with your CKEditor version)

4. Install Media (oEmbed) plugin ( (Choose version in accord with your CKEditor version)

5. Go to "Admin" > "Plugins" > "CKEditor4 options"

6. Add 'oembed' buttons in "Toolbar button" option

e.g.:

[Before]

['Bold','Italic','Underline','Strike'],['Font','FontSize'],['TextColor','BGColor'],['Link','Unlink'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],['RemoveFormat', 'Maximize']

[After]

['Bold','Italic','Underline','Strike'],['Font','FontSize'],['TextColor','BGColor'],['Link','Unlink'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['Image','Flash','oembed','Table','HorizontalRule','Smiley','SpecialChar'],['RemoveFormat', 'Maximize']

7. Configure "Other configuration" option

e.g.:

[Before]

toolbarCanCollapse:false,
removePlugins:'elementspath',
resize_enabled:false,
autogrow:false,
entities:false

[After]

toolbarCanCollapse:false,
removePlugins:'elementspath',
resize_enabled:false,
autogrow:false,
entities:false,
allowedContent:true,
extraPlugins:'lineutils,clipboard,widget,oembed',
oembed_maxWidth:'560',
oembed_maxHeight:'315',
oembed_WrapperClass:'embededContent'

8. Tune htmlLawed option

See here.

[2014/10/03] If you are using CKEditor V1.3 later, this is unnecessary (You can change sanitize option in CK admin panel).

9. Add content (Confirm result)

Editor

Dialog

Result

10. Caution
  • iframe is a non-recommended tag.
  • Security level may withdraw a little by allowing iframe.
Have fun!!
Q2A version: 1.6.3

1 Answer

0 votes
answered Jun 8 by Maik2

Hi, is later for help plz.

Why the Q2 wipe the oembed  when publishing..

on editor oembed display the imagen, but when publishing  oembed  disappears.

on base.

elements' => '*+oembed+object+iframe-form',  ..not result.

or

elements' => '*+embed+object+oembed+iframe-form',  ..not result.

on page.php

$qa_content['script_rel'] = array('qa-content/jquery-3.2.1.min.js');    ..not result.

or

$qa_content['script_rel'] = array('qa-content/jquery-1.10.2.min.js');   ..not result.

no error in console, plz what am i missing here?

commented Jun 12 by sama55
Is the HTML tag of the media in the article "iframe"? You can check HTML tags of the article by referring to the database (qa_posts table). And, also check that your override function (qa_sanitize_html) is running correctly.
...