Question

我正在解决流行的TinyMCE编辑器插件的问题，该插件嵌入在Fancybox弹出窗口中。

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

当按下编辑链接时，AJAX调用将从服务器检索内容到<textarea>。在<textarea>上即时启动TinyMCE编辑器。

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

第一次触发此活动时，它可以正常运行。

所有其他尝试都失败了。必须重新加载页面才能使TinyMCE按预期再次运行。

结果是隐藏在页面上的TinyMCE编辑器，页面上隐藏了textarea对象。即使我要在FireBug中覆盖可见性/显示属性，编辑器仍然无效。（意思是：编辑器中没有显示任何内容，没有显示克拉/光标，根本无法修改内容;我可以使用工具栏按钮，但它们也不会影响可见内容）。

我正在使用TinyMCE 4.2.4 for 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
    });
}

这是相关的＆＃34;编辑＆＃34;链接代码：

$("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编辑器

1 个答案: