le MEMO du WEB développeur
••• CkEditor •••  Liste des Mémos, astuces et bonnes pratiques

Bug sur le plugin mediaembed de CkEditor

Attention, le plugin MediaEmbed qui permet de rajouter du code vidéo, récupéré de Youtube ou Vimeo, par l'intermidiaire de la barre à outil de ckeditor est un peu buggé.

Ci dessous le code complet, en rouge le paramètre manquant.

/*
* @example An iframe-based dialog with custom button handling logics.
*/
( function() {
    CKEDITOR.plugins.add( 'MediaEmbed',
    {
        requires: [ 'iframedialog' ],
        init: function( editor )
        {
           var me = this;
           CKEDITOR.dialog.add( 'MediaEmbedDialog', function (editor)
           {
    
              return {
                 title : 'Embed Media Dialog',
                 minWidth : 550,
                 minHeight : 200,
                 contents :
                       [
                          {
                             id : 'iframe',
                             label : 'Embed Media',
                             expand : true,
                             elements :
                                   [
                                      {
                     type : 'html',
                     id : 'pageMediaEmbed',
                     label : 'Embed Media',
                     style : 'width : 100%;',
                  
                     html : '<iframe src="'+me.path+'dialogs/mediaembed.html" frameborder="0" name="iframeMediaEmbed" 
                               id="iframeMediaEmbed" allowtransparency="1" style="width:100%;margin:0;padding:0;">
                             </iframe>'
                   }
                                   ]
                          }
                       ],
                  onOk : function()
                 {
    for (var i=0; i<window.frames.length; i++) {
       if(window.frames[i].name == 'iframeMediaEmbed') {
          var content = window.frames[i].document.getElementById("embed").value;
       }
    }
    final_html = 'MediaEmbedInsertData|---' + escape('<div class="media_embed">'+content+'</div>') + '---|MediaEmbedInsertData';
                    editor.insertHtml(final_html);
                    updated_editor_data = editor.getData();
                    clean_editor_data = updated_editor_data.replace(final_html,'<div class="media_embed">'+content+'</div>');
                    editor.setData(clean_editor_data);
                 }
              };
           } );

            editor.addCommand( 'MediaEmbed', new CKEDITOR.dialogCommand( 'MediaEmbedDialog' ) );

            editor.ui.addButton( 'MediaEmbed',
            {
                label: 'Embed Media',
                command: 'MediaEmbed',
                icon: this.path + 'images/icon.gif'
            } );
        }
    } );
} )();

 

publié le 01/04/2012 par Memo Web
Commenter le Mémo :

Ajouter des styles dans la barre d'outils de ckeditor
Récupérer le texte du contenu de l'editeur CKEditor en javascript
Rajout automatique de paragraphe dans ckEditor
Erreur javascript "w is undefined"
Configurer ckeditor
Empêcher la saisie de mise en forme sur copier coller - ckEditor
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos