Comment puis-je déplacer la barre d'outils de TinyMCE dans une fenêtre contextuelle modale?

Question

J'utilise TinyMCE & jQuery et j'ai un problème pour déplacer la barre d'outils externe de TinyMCE vers un autre emplacement dans le DOM. Pour compliquer davantage les choses, il existe plusieurs instances de TinyMCE sur la page. Je veux seulement la barre d'outils pour celle qui est en cours d'édition.

Voici quelques exemples de code:

$(textarea).tinymce({ 
    setup: function(ed) {setupMCEToolbar(ed, componentID, displaySettingsPane)} 
    ,script_url: '/clubs/data/shared/scripts/tiny_mce/tiny_mce.js' 
    ,theme : "advanced" 
    ,plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template" 
    ,theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect" 
    ,theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor" 
    ,theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen" 
    ,theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak" 
    ,theme_advanced_toolbar_location : "external" 
    ,theme_advanced_toolbar_align : "left" 
    ,theme_advanced_statusbar_location : "bottom" 
    ,theme_advanced_resizing : true 
}); 

var setupMCEToolbar = function (mce, componentID, displaySettingsPane) 
{ 
mce.onClick.add(function(ed,e){ 
    displaySettingsPane($('#' + componentID)); 
    $('#' + componentID).fetch('.mceExternalToolbar').eq(0).appendTo('#settingsPaneContent'); 
}); 
} 

En fait, il semble que la fonction setupMCEToolbar ne peut pas retrouver le mceExternalToolbar pour le déplacer.

Est-ce que quelqu'un a déjà eu du succès en essayant de faire quelque chose comme ça?

EDIT Il est un lundi bien ... il n'a pas pu trouver la barre d'outils externe parce que j'utilisais les enfants() au lieu de chercher().

Il y a toujours un problème: 1) Le déplacement est incroyablement lent et 2) Une fois qu'il bouge, TinyMCE se casse.

EDIT 2 Un peu plus de précisions: Le modal est draggable, rendant ainsi les solutions de contournement purement CSS un peu maladroit ...

Answer 1

Je n'ai pas eu beaucoup de succès à déplacer l'élément, mais il devrait être assez simple à enlever et recréer la boîte TinyMCE dans votre barre d'outils.

je ferais quelque chose comme ce qui suit:

var content = tinyMCE.get('id_of_text_area').getContent(); 
tinyMCE.execCommand('mceFocus', false, 'id_of_text_area'); 
tinyMCE.execCommand('mceRemoveControl', false, 'id_of_text_area'); 

// pop up your new area 
popup('new_area'); 

// Add a new textarea with the content 
$('<textarea id="id_of_text_area" />') 
    .val(content) 
    .appendTo('#new_area') 
    // initialize a new editor on this textarea 
    .tinymce({..}); 

Answer 2

lorsque vous avez textarea id = « opis » utiliser que:

#opis_external { 
     top:200px !important; 
     left:0px !important; 
     position:fixed !important; 

    }