如何将TinyMCE的工具栏移动到模态弹出窗口中？

我正在使用TinyMCE & jQuery，并且在将TinyMCE的外部工具栏移动到DOM中的另一个位置时出现问题。如何将TinyMCE的工具栏移动到模态弹出窗口中？

若要进一步复杂化，页面上有多个TinyMCE实例。我只想要当前正在编辑的那个工具栏。

下面是一些示例代码：

$(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'); 
}); 
}

~~基本上，它好像在setupMCEToolbar功能无法追查mceExternalToolbar移动它。~~

有没有人试图做过这样的事情？

编辑这是一个星期一好了...这可能不是因为我是用儿童（）找到外部工具栏，而不是取（）。

还有一个问题： 1）移动它非常慢，2）一旦移动，TinyMCE就会中断。

更

EDIT 2 一些说明：该模式可拖动，从而使任何纯CSS的变通方法有点别扭......

来源

2009-10-19 Nate Wagar

我没有太多成功的移动元素，但它应该是相当简单的删除并重新创建您的工具栏中的TinyMCE框。

我会做类似如下：

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({..});

来源

2009-10-19 19:03:37

它看起来像你说真正移动整个编辑块进入弹出窗口？这可能是我最终需要做的事情，但是我真的希望内容在编辑时保持在页面的流程中。 – 2009-10-19 19:16:41

刚刚用css重新定位它怎么样？我最初一定误解了这个问题。 – 2009-10-19 19:28:19

不幸的是，我必须很难...模式弹出是可拖动的。通过CSS重新定位工具栏将是可行的，但通过拖动模式拖动时通过JS进行更新会很渺茫。我应该在我最初的发帖中澄清。 – 2009-10-19 20:28:37

，当你有textarea的ID =“OPIS”使用：

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

    }

来源

2011-10-20 22:38:24 Piotr

你从哪里得到“opis”或“opis_external”？这个certinaly并没有接近回答这个问题，“我怎样才能将TinyMCE的工具栏移动到一个模式弹出框中？”这确实没有任何解决方法，也没有任何意义。 – 2011-10-20 22:44:20

如果原始文本区域的ID为“opis”，则外部工具栏将位于ID为“opis_external”的div中。因此，对于上面的示例，id将是“id_of_text_area_external” – 2012-07-03 18:10:35

如何将TinyMCE的工具栏移动到模态弹出窗口中？

回答

相关问题