Question

动态生成的tinymce textarea非常好，但无法输入任何生成的textareas。

jsFiddle预览：

每个textarea都有独特的ID，但只是无法弄清楚可能存在什么问题。

以下是HTML头文件中的JS：

<script type="text/javascript">
$(function(){
  var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.add').relCopy({ append: removeLink});  
});
</script>

HTML表单：

<form name = "form2" method="post" action="">

<div class="clone_box_holder cloneEmp">

<p>
<label><strong>New Text</strong></label>
<textarea id="textarea_id" name="content[]">
<?php echo stripslashes($content); ?>
</textarea>
  <div class="clear"></div>
</p>

</div>

<p><a href="#" class="add add_res_submit" rel=".cloneEmp">Add More Text</a></p>

</form>

JS生成新的textarea：

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }                       
                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);

非常感谢获得帮助。

Answer 1

似乎你无法使用插件注入的TinyMCE编辑器克隆HTML。此链接在许多评论中提及：http://www.tinymce.com/forum/viewtopic.php?id=26372。

链接中提到的

remove在您的代码中对我不起作用，也许您可以让它工作。在此期间，请参阅下面的替代方案，我在复制附加了第三方插件的DOM元素时使用自己。

您可以将HTML模板设置为您要继续注入的DOM，类似于：

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>New Text</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

我删除了文本区域的id属性，请参阅注释帖子的底部。

不是克隆现有的已经注入的tinyMCE DOM元素，而是仅注入模板，然后重新附加tinyMCE插件以包含新的DOM元素。

当克隆已经注入了tinyMCE编辑器时，似乎tinyMCE插件变得困惑。你只注入你的基本DOM元素，让tinyMCE插件完成剩下的工作，这似乎效果最好。

我已经完成了非常非常基本的版本，删除了大多数与textarea id属性相关的唯一代码更改，只关注相关代码。

DEMO - 动态注入tinyMCE textareas

尝试将此功能合并到您的代码中。

删除文本区域ID，因为它只会导致问题，即使在更改时也是如此它在代码中。单击时，您始终知道当前textarea的上下文无论如何，进入它。

完整的演示代码以方便：

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>New Text</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

function initTinyMCE() {
    tinyMCE.init({
        mode: "textareas",
        theme: "simple"
    });
}

(function ($) {
    $.fn.relCopy = function (options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function () {

            // set click action
            $(this).click(function () {                
                var $clone = $(template);

                $('form').find('.cloneEmp:last').after($clone);

                initTinyMCE(); // re-attach plug-in to include new DOM

                return false;
            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


$(function () {
    var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
    $('a.add').relCopy({
        append: removeLink
    });
});

initTinyMCE();

无法输入动态生成的textarea

1 个答案: