javascript - 无法重复使用弹出嵌入的 TinyMCE 编辑器

Question

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

我显示可编辑的对象列表以及编辑链接。

按下“编辑”链接时，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

我试图解决你的问题。如果我理解正确的话，你有链接列表，每个链接都应该用 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
    });
}

希望能帮助您解决问题。