Невозможно повторно использовать всплывающий встроенный редактор TinyMCE

Question

Я вытаскиваю свои волосы из-за проблемы с популярным плагином TinyMCE Editor, встроенным в всплывающее окно Fancybox.

Я показываю список объектов, которые можно редактировать, а также редактировать ссылки.

При нажатии ссылки «Правка» вызов AJAX извлекает контент с сервера, который помещается в <textarea>. Редактор TinyMCE запускается «на лету» на этом <textarea>.

Когда это всплывающее окно закрыто, оно вызывает функцию очистки.

В первый раз, когда это действие запускается, оно работает без проблем.

Все дополнительные попытки не выполняются. Страница TinyMCE должна быть перезагружена, чтобы работать снова, как ожидалось.

В результате редактор TinyMCE скрыт на странице, объект textarea скрыт на странице. Даже если я должен переопределить видимость/отображение свойств в FireBug, редактор все равно не работает. (это означает: в редакторе нет содержимого, не отображается изображение карата/курсора, не может вообще изменять содержимое, я могу использовать кнопки панели инструментов, но они также не влияют на видимый контент).

Я использую TinyMCE 4.2.4 для jQuery.

Это мой редактор TinyMCE код инициализации/очистки:

hideEditor = function(){ 
    tinyMCE.remove('#r_description'); 
}; 
loadEditor = function(){ 
    tinyMCE.init({ 
     script_url : '/js/plugins/tinymce/tinymce.min.js', 
     selector: "#r_description", 
     mode: "none", 
     setup : function(ed) { 
      var tinymce_placeholder = $('#'+ed.id); 
      var attr = tinymce_placeholder.attr('placeholder'); 

      if (typeof attr !== 'undefined' && attr !== false) { 
       var is_default = false; 

       ed.on('init' , function(ed) { 
        var cont = ed.target.getContent().replace(/<p>|<\/p>/g, ''); 
        if(cont.length == 0){ 
         ed.target.setContent(tinymce_placeholder.attr("placeholder")); 
         cont = tinymce_placeholder.attr("placeholder"); 
        } 

        is_default = (cont == tinymce_placeholder.attr("placeholder")); 
        if (!is_default){ return; } 
       }); 

       ed.on('focus', function(ed,e) { 
        var cont = ed.target.getContent().replace(/<p>|<\/p>/g, ''); 
        is_default = (cont == tinymce_placeholder.attr("placeholder")); 
        if (is_default){ 
         ed.target.setContent(''); 
        } 
       }); 

       ed.on('blur', function(ed,e) { 
        var cont = ed.target.getContent(); 
        if (cont == ''){ 
         ed.target.setContent(tinymce_placeholder.attr("placeholder")); 
        } 
       }); 

      } 
     }, 

     // General options 
     theme : "modern", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_resizing : true, 
     toolbar: "link unlink | undo redo", 
     relative_urls : false, 
     remove_script_host : false, 
     content_css: "/css/wysiwyg.css", 
     menubar: false, 
     statusbar: false 
    }); 
} 

Это релевантная "Редактировать" ссылка Код:

$("a.edit").on("click", function(){ 
    var id = $(this).data("id"); 
    if (id != ""){ 
     $.get('/load-' + $ttype + '?d=' + id , function(d){ 
      if (d == 0){ 
      } else { 

       $(".edited").find("#r_description").val(d.description);     
       $.fancybox("#addResource", { 
        afterLoad: function() { 
         loadEditor(); 
        }, 
        beforeClose: function() { hideEditor(); } 
       }); 
      } 
     }); 

    } 
    return false; 
}); 

Answer 1

Я пытался решить вашу проблему. Если я правильно понимаю, у вас есть список ссылок, и каждый из них должен открыть один fancybox с помощью редактора TinyMCE.

Я сделал это в примере this JSFIDDLE. Но с одним хака:

HTML

<a href='javascript:void(0);' class="editor" data-descr='test1'>editor 1</div> <br/> 
<a href='javascript:void(0);' class="editor" data-descr='test2'>editor 2</div> <br/> 
<a href='javascript:void(0);' class="editor" data-descr='test3'>editor 3</div> <br/> 

<div id="TheFancybox" style="display: none;"> 
    <textarea id="r_description"></textarea> 
</div> 

JS

$("a.editor").on("click", function(){ 
var self = $(this);     
    $.fancybox("#TheFancybox", { 
     afterLoad: function() { 
      /* loadEditor(); 
      tinyMCE.get("r_description").execCommand('mceInsertContent', false, self.data('descr')); */ 
      //tinyMCE initialized here not working correctly 
     }, 
     afterClose: function() { hideEditor(); } 
    }); 
    //but if you init it here - it will 

    $('#r_description').val(self.data('descr')); 
    loadEditor(); 

    return false; 
}); 

function hideEditor(){ 
    tinyMCE.remove('#r_description'); 
}; 

function loadEditor(){ 
    tinymce.init({ 
     selector: "#r_description", 
     mode: "none", 
     setup : function(ed) { 
      var tinymce_placeholder = $('#'+ed.id); 
      var attr = tinymce_placeholder.attr('placeholder'); 

      if (typeof attr !== 'undefined' && attr !== false) { 
       var is_default = false; 

       ed.on('init' , function(ed) { 
        var cont = ed.target.getContent().replace(/<p>|<\/p>/g, ''); 
        if(cont.length == 0){ 
         ed.target.setContent(tinymce_placeholder.attr("placeholder")); 
         cont = tinymce_placeholder.attr("placeholder"); 
        } 

        is_default = (cont == tinymce_placeholder.attr("placeholder")); 
        if (!is_default){ return; } 
       }); 

       ed.on('focus', function(ed,e) { 
        var cont = ed.target.getContent().replace(/<p>|<\/p>/g, ''); 
        is_default = (cont == tinymce_placeholder.attr("placeholder")); 
        if (is_default){ 
         ed.target.setContent(''); 
        } 
       }); 

       ed.on('blur', function(ed,e) { 
        var cont = ed.target.getContent(); 
        if (cont == ''){ 
         ed.target.setContent(tinymce_placeholder.attr("placeholder")); 
        } 
       }); 
      } 
     }, 

     // General options 
     theme : "modern", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_resizing : true, 
     toolbar: "link unlink | undo redo", 
     relative_urls : false, 
     remove_script_host : false, 
     content_css: "/css/wysiwyg.css", 
     menubar: false, 
     statusbar: false 
    }); 
} 

Я надеюсь, что это поможет вам решить вашу проблему.