TinyMCE & Fancybox - редактор не будет работать во втором представлении - PullRequest
Новая
       25

TinyMCE & Fancybox - редактор не будет работать во втором представлении

4 голосов
/ 10 мая 2011

Я добавил TinyMCE в свой проект и использую его в текстовой области, которая появляется в фантастическом окне. При первом действии он работает нормально, но если я затем закрою его и попытаюсь открыть снова, он не даст мне набрать текст в поле. Все выглядит хорошо, просто текстовая область выглядит серой и не принимает ввод. Если я нажимаю любую из кнопок (полужирный, курсив, выравнивание, выбор шрифта и т. Д.), Консоль выдает ошибку «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>

Может кто-нибудь помочь мне здесь?

Спасибо!

Ответы [ 7 ]

4 голосов
/ 27 декабря 2011

Я использую fancybox 2.0 

$("#notesbtn").fancybox({ 
    beforeShow: function () { tinymce.execCommand('mceToggleEditor', false, 'elm1'); },
    beforeClose: function () { tinymce.EditorManager.execCommand('mceRemoveControl', true, 'elm1'); }
});
1 голос
/ 26 декабря 2015

эта работа для меня для fancybox 2.1.5, я думаю 

$(".fancybox").fancybox({
    afterLoad: function () {
        tinymce.remove();
        setTimeout(function(){tinymce.init({selector:'textarea'});},500);
    }
});
1 голос
/ 03 июля 2014

Для tinyMCE 4.X Добавьте tinyMCE.remove () в ваш fancybox до обратного вызова Close: 

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

см .: Удалить элемент управления TinyMCE и повторно добавить

1 голос
/ 27 августа 2012

У меня была та же проблема в проекте, над которым я работал некоторое время, и я пытался исправить это несколькими способами за последние пару месяцев, но вчера я наконец-то смог ее решить манера, которая, кажется, работает хорошо.

Ключ заключается в том, что вместо использования версии TinyMCE, управляемой jQuery, вам нужно использовать обычную версию javascript с параметром конфигурации mode , установленным на 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 на месте.

Это помогло мне. У вас не было проблем с серым экраном, о котором вы упоминали, с тех пор как я применил этот метод.

1 голос
/ 10 мая 2011

Вам необходимо правильно отключить tinymce перед закрытием fancybox, чтобы иметь возможность открыть редактор tinymce во второй раз. Используйте это, чтобы выключить его правильно 

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);
0 голосов
/ 21 января 2015

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

Обратитесь к моему ответу, чтобы увидеть, как он работает с AJAX-запросами.

0 голосов
/ 10 мая 2011

используйте этот код от jquery.tinymce.js: 

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