jquery - How can I move TinyMCE's toolbar into a modal popup? -

I have a TinyMCE & amp; JQuery and I'm having trouble moving TomMMEE's external toolbars to another location in the DOM.

To make things more complicated, there are many TinyMCE examples on the page. I want a toolbar for the currently being edited.

Here are some sample codes:

  $ (textarea). Tinymce (Setup: Ocean (Ed, Component ID, DisplaySpacePan)}, script_url: '/ clubs / data / shared / scripts / tti_mcti_mcds', subject: "advanced", plugins: "safari, pagebreake, Style, Layer, Table, Save, Adr, Edible, Action, Ispell, InlinePopups, Datadatite, Preview, Media, Search, Print, Containmenu, Paste, Directionality, Fullscreen, Non-Project, Visual Talkers, nonbreaking, xhtxtras, templates ", theme_advanced_batone1:" save, new document, bold, italic, underlined, strikethrough, | busfilfet, justifier, ethics, justifiable, stylize, format selection, fonts added, fontes selection ", theme_ AdvancedButenance 2: "Cut, Copy, Paste, Pastaste, Pasteword, Search, Change, Numlist, |, outdent, indent, blockquote, |, undo, redo, |, link, unlink, anchor, image , Cleanup, Help, Code, | insertdate, inserttime, preview, |, forecolor, backcolor ", theme_ Advanced_buttons3:" tablerant, |, hr, redformat, visualad, |, sub, super, |, showroom, emotions, aspell, media , Adr, Print, |, LTR, RTL, | Fullscreen ", Theme_Advanced_button 4:" DietLayer, left side, theme_advanced_tolbar_allindon: "left", theme_advanced_statusbar_location: "left", subject, advanced, "bottom", topic_Next_size: true }); Var setupMCEToolbar = function (mce, componentID, displaySettingsPane) {mce.onClick.add (function (AD, E) {displaySettingsPane ($ ('#' + componentID)); $ ('#' + componentID) .fetch ('. MceExternalToolbar '). Eq (0) .appendTo (' # settings page content ');}); }  

Actually, it seems that the setupMCEToolbar function can not track the mceExternalToolbar to move it.

Has anyone ever tried to achieve something like this?

Edit This Monday is OK ... This external toolbar could not be found because I was using kids instead of Fetch. / P>

There is still one issue in it: 1) It is incredibly slow to walk and 2) Once it moves, then TinyMCE breaks.

Edit 2 A little more clarification: The modal is draggable, thus making purely CSS solutions a bit weird ...

< P>

I have not had much success in moving the element forward, but it should be quite simple to remove and re-create TinyMCE in your toolbar .

I will do something like:

  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'); // content $ ('& lt; textarea id = "id_of_text_area" / & gt;') .value (content) .appendTo ('# new_area') // Add a new texttext with content Create a new editor on this text Please. Tinymce ({..});