无法重复使用弹出式嵌入式 TinyMCE 编辑器

Question

我正在为流行的 TinyMCE 编辑器插件的问题而烦恼，该插件嵌入在 Fancybox 弹出窗口中 window。

我显示可以编辑的对象列表，以及编辑 links。

按下编辑 link 时，AJAX 调用会从服务器检索内容，并将其放入 <textarea> 中。在此 <textarea> 上即时启动了 TinyMCE 编辑器。

当该弹出窗口关闭时，它会触发清理功能。

第一次触发此 activity 时，它没有问题。

所有额外的尝试都失败了。必须重新加载页面，TinyMCE 才能按预期再次工作。

结果是TinyMCE编辑器隐藏在页面上，textarea对象隐藏在页面上。即使我要覆盖 FireBug 中的 visibility/display 属性，编辑器仍然不起作用。（意思是：编辑器里没有内容显示，没有carat/cursor显示，根本不能修改内容；我可以使用工具栏按钮，但它们也不影响可见内容）。

我正在为 jQuery 使用 TinyMCE 4.2.4。

这是我的 TinyMCE 编辑器init/cleanup代码：

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
    });
}

这是相关的"Edit"link代码：

$("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

我试着解决了你的问题。如果我理解正确的话，你有链接列表，每个链接都应该用 TinyMCE 编辑器打开一个 fancybox。

我在 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
    });
}

希望对您的问题有所帮助。

无法重复使用弹出式嵌入式 TinyMCE 编辑器

Cannot re-use popup-embedded TinyMCE editor

html

javascript

jquery

tinymce

fancybox