Я добавил TinyMCE в свой проект и использую его в текстовой области, которая появляется в fancybox. В первый раз, когда я его воздействую, он работает нормально, но если я закрою его и попытаюсь открыть его снова, он не позволит мне ввести поле. Это выглядит нормально, только текстовая область неактивна и не принимает входные данные. Если я нажимаю любую из кнопок (полужирный, курсив, выравнивание, выбор шрифта и т. Д.), Консоль отправляет ошибку «j is null».
Я нашел некоторые подобные проблемы в Интернете, но не смог найти никого с похожим набором для моего, поэтому я смущен. Я думаю, проблема может заключаться в том, что я пытаюсь добавить новый экземпляр tinyMCE каждый раз, когда отображается fancybox, а потом мне нужно его уничтожить, возможно, до повторной инициализации? Но я не уверен, как его уничтожить, или даже если это то, что мне нужно сделать.
Вот мой код:
<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> Может кто-нибудь помочь мне здесь?
Благодаря!
Перед закрытием fancybox вам нужно закрыть tinymce, чтобы во второй раз открыть редактор tinymce. Используйте это, чтобы правильно закрыть его
tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);
Я использую fancybox 2.0
$("#notesbtn").fancybox({ beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'elm1'); }, beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); } });
У меня была такая же проблема в проекте, над которым я работал некоторое время, и я попробовал пару разных способов исправить это за последние пару месяцев, но вчера я наконец смог ответить на него так, как кажется чтобы работать хорошо.
Ключ заключается в том, что вместо использования версии TinyMCE, управляемой jQuery, вам нужно использовать обычную версию javascript, при этом параметр конфигурации режима none . Это нужно инициализировать, как только загружается страница (а не в то время, когда вы хотите загрузить TinyMCE, как вы это делаете в своем примере). Затем, подобно методу, предложенному в ответе @ user1116745, вы используете обратные вызовы FancyBox для инициализации TinyMCE, как только FancyBox закончил загрузку следующим образом:
(это предполагает, что ваша текстовая область имеет идентификатор text_form )
$(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'); } }); })
Как взято из API FancyBox , вот когда эти два обратных вызова срабатывают:
onComplete – будет вызываться после отображения содержимого
onCleanup – будет вызван непосредственно перед закрытием
Для получения дополнительной информации о том, что делает tinyMCE.execCommand , см. Документы . По сути, он конвертирует текстовое поле в экземпляр tinyMCE на месте.
Это помогло мне. У меня не было проблем с серым экраном, о котором вы упоминаете, так как я реализовал этот метод.
Для tinyMCE 4.X Добавьте tinyMCE.remove () в свой обратный вызов fancybox beforeClose:
beforeClose : function() { tinyMCE.remove(); }
см.: Удалите элемент управления TinyMCE и повторно добавьте
user этот код от jquery.tinymce.js:
'onComplete': function() { $('textarea.tinymce').tinymce({ ... }) ...
https://stackoverflow.com/a/28063926/3478114
Обратитесь к моему ответу, чтобы узнать, как он работает с запросами ajax.
эта работа для меня для fancybox 2.1.5.
$(".fancybox").fancybox({ afterLoad: function () { tinymce.remove(); setTimeout(function(){tinymce.init({selector:'textarea'});},500); } });