TinyMCE＆Fancybox - 編輯器不能在第二個視圖上工作

我已經將TinyMCE添加到我的項目中，並且正在使用它在彈出窗口的文本區域中。我第一次採取行動時，它運行良好，但如果我關閉它並嘗試再次打開它，它不會讓我輸入框中。它看起來不錯，只是文本區域是灰色的，並且不會接受輸入。如果我點擊任何按鈕（粗體，斜體，對齊，字體選擇等），控制檯會收到錯誤「j is null」。TinyMCE＆Fancybox - 編輯器不能在第二個視圖上工作

我在網上發現了一些類似的問題，但是找不到與我的類似設置的任何人，所以我很困惑。我認爲問題可能是我每次顯示fancybox時都要添加一個新的tinyMCE實例，然後我需要在重新初始化之前銷燬它，也許呢？但我不知道如何銷燬它，或者即使這是我需要做的。

這裏是我的代碼：

<head>...</head> 
<body> 
<script type="text/javascript"> 
function tinyMCE_setup() { 
    tinyMCE.init({ 
     mode : "textareas", 
     theme : "advanced", 
     plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", 
     theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,forecolor", 
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code", 
     theme_advanced_buttons3 : "", 
     theme_advanced_buttons4 : "", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "center", 
     //theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : true 
    }); 
} 
function tinyMCE_remove() { 
    //tinyMCE.destroy(); 
} 
</script> 

... some html ... 

<!-- Text --> 
<div style="display:none"> 
    <div id="addtext" class="addcontent"> 
    <p class="headline bg_text">add text or caption</p> 
    <form id="addText" name="addText" action="add_text.php" method="post" onSubmit="return checkAddText()"> 
    <label>enter your caption or text here</label> 
    <textarea id="text" name="text" rows="10" style="clear: both; margin-bottom: 14px; margin-top: 5px; width: 466px"></textarea> 
     <input type="image" name="submit" id="imageField2" src="images/site/button_text_submit.gif" onMouseOver="this.src='images/site/button_text_submit_over.gif'" onMouseOut="this.src='images/site/button_text_submit.gif'"/> 
    </form> 
    </div> 
</div> 

... more html ... 

</body> 
</html> 

<script> 
$(document).ready(function() { 

$("a#link_addtext").attr("href", "#addtext"); 

$('a#link_addtext').fancybox({ 
    'hideOnContentClick': false, 
     'padding' : 0, 
    'overlayOpacity' : 0.1, 
     'onComplete': function(){ 
     tinyMCE_setup(); 
    } 
    }); 

    ... other javascript .. 
} 
</script>

誰能幫助我在這裏？

謝謝！

來源

2011-05-10 Sharon

您需要關閉TinyMCE的，以便在關閉之前的fancybox正確才能夠打開TinyMCE的編輯器第二次。使用此將其關閉正確

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

來源

2011-05-10 18:16:04 Thariama

謝謝。我如何獲得editor_id？ – Sharon 2011-05-11 10:32:49

默認情況下，editor_id是「內容」，但是如果您的textarea獲得了id tinymce，則會將此id指定爲editor_id！ – Thariama 2011-05-11 10:52:23

用戶從jquery.tinymce.js驗證碼：

'onComplete': function() { 
    $('textarea.tinymce').tinymce({ 
     ... 
    }) 
    ...

來源

2011-05-10 14:55:31

謝謝，但沒有奏效 - 在控制檯窗口中，我得到「$（」 textarea.tinymce「）TinyMCE的是。不是一個函數「，編輯器不會出現 - 我只是得到一個正常的textarea。 – Sharon 2011-05-10 15:04:48

不，您應該下載並將其添加到您的html源代碼中，http://tinymce.moxiecode.com/tryit/jquery_plugin.php – 2011-05-10 15:07:31

謝謝，但我不明白你的意思。我需要下載什麼？我已經有了tiny_mce.js並且正在鏈接到。我需要下載其他東西嗎？ – Sharon 2011-05-10 15:12:03

我使用fancybox 2.0

$("#notesbtn").fancybox({ 
    beforeShow: function() { tinymce.execCommand('mceToggleEditor', false, 'elm1'); }, 
    beforeClose: function() { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); } 
});

來源

2011-12-26 20:38:48 Mickey

Fancybox 2.0正在使用不適合軟件的許可證。此外，它可能會違反jQuery自己的許可證，如果這樣做，會導致整個軟件包無法使用。 – hakre 2011-12-26 21:08:37

我使用fancybox v1，並且我設法使用Fancybox 1中的回調以非常相似的方式進行回調。查看Fancybox V1的'onComplete'和'onCleanup'回調函數：'$（'＃content_objects_edit'）。fancybox（{onComplete：function（）{tinyMCE.execCommand（'mceAddControl'，false，'text_form'）;}， onCleanup：函數（）{ tinyMCE.execCommand（ 'mceFocus'，假， 'text_form'）; tinyMCE.execCommand（ 'mceRemoveControl'，假， 'text_form'）; } }）;' – Batkins 2012-08-10 21:05:13

我' beforeShow'ccurrectly working.thank you;） – mghhgm 2015-11-06 18:32:05

我在，我一直在現在的工作了一段時間的一個項目這個同樣的問題，我嘗試了在過去的幾個月中，通過幾種不同的方式來修復它，但是昨天我終於能夠以似乎運行良好的方式來解決它。

關鍵是，不是使用jQuery驅動版本的TinyMCE，而是需要使用正常的javascript版本，mode configuration option設置爲none。這應該在頁面加載後立即被初始化（而不是在你想要加載TinyMCE的時候，就像在你的例子中那樣）。隨後，類似的技術在@ user1116745的回答表明，你用的fancybox的回調初始化TinyMCE的，一旦的fancybox加載完成，像這樣：

（這裏假設你的文本區域有text_form一個id）

$(function(){ 
    $('#content_objects_edit').fancybox({ 
    onComplete: function() { tinyMCE.execCommand('mceAddControl', false, 'text_form'); }, 
    onCleanup: function() { 
     tinyMCE.execCommand('mceFocus', false, 'text_form'); 
     tinyMCE.execCommand('mceRemoveControl', false, 'text_form'); 
    } 
    }); 
})

由於從FancyBox's API拍攝，這裏是當這兩個回調火：

onComplete - 一旦顯示的內容將被稱爲

onCleanup - 將在關閉前調用

有關tinyMCE.execCommand所做的更多信息，see the docs。從本質上講，它可以將textarea當場轉換爲tinyMCE實例。

這對我來說訣竅。自從我實施此方法後，您提到的灰色屏幕沒有任何問題。

來源

2012-08-27 19:59:43 Batkins

對於tinyMCE的4.X 在你的fancybox beforeClose回調添加tinyMCE.remove（）：

beforeClose : function() { 
    tinyMCE.remove(); 
}

見：Remove TinyMCE control and re-add

來源

2014-07-03 09:31:50 bananaCute

Thaaaank youu親愛的。我試圖解決我的問題在2天內，但現在你的答案我解決這個問題。謝謝。 – mghhgm 2015-11-07 13:18:16

https://stackoverflow.com/a/28063926/3478114

請參閱我的回答怎麼看呢與Ajax請求一起工作。

來源

2015-01-21 09:51:26

這項工作對我來說的fancybox 2.1.5我想

$(".fancybox").fancybox({ 
    afterLoad: function() { 
     tinymce.remove(); 
     setTimeout(function(){tinymce.init({selector:'textarea'});},500); 
    } 
});

來源

2015-12-26 18:52:33

TinyMCE＆Fancybox - 編輯器不能在第二個視圖上工作

回答

相關問題