Question

当我尝试使用cloneNote（true）克隆textarea时，克隆的textarea不可编辑。有谁知道如何解决这个问题？示例代码如下所示：

<html>
<head>
<script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        theme : "advanced",
        mode : "textareas",
});
</script>

<script type="text/javascript">

testclonenode = {

    addAbove : function (element) {
        var rowEl = element.parentNode.parentNode.parentNode;
        var rowElClone = rowEl.cloneNode(true);

        rowEl.parentNode.insertBefore(rowElClone, rowEl);

        return false;
    }
};
</script>
</head>

<body>
<table>
<tr><td>
    <textarea name="content" style="width:100%">this is a test </textarea>
<p> <button onclick='return testclonenode.addAbove.call(testclonenode, this);'> Add above </button>
</td></tr>
</table>
</body></html>

Answer 1

它不起作用。此外，使用dom操作移动一个tinymce编辑器是不可能的。

tinymce wiki声明如下：

<强> mceAddControl

转换指定的textarea或div   进入具有的编辑器实例   指定的ID。

示例：
tinyMCE.execCommand('mceAddControl',false,'mydiv');

因此，当您克隆textarea时，还有另一个问题：您将拥有两次相同的id，这将导致访问正确的tinymce实例时出错。

Answer 2

我通过使用每次触发克隆功能时递增的ID来实现此功能，所以

var insertslideID = 0;
function slideclone() {
    $('<div class="slides"><textarea name="newslide['+insertslideID+'][slide_desc]" id="mydiv'+insertslideID+'"></textarea></div>').insertAfter('div.slides:last');
    tinyMCE.execCommand('mceAddControl',false,'mydiv'+insertslideID);
    insertslideID++;
}
$('input[name=addaslidebtn]').click(slideclone);

似乎工作。

Answer 3

一点点整洁，我只是为我的id使用一个数字 - copy1是我的按钮的名称 - 我将新元素添加到我的容器的末尾。

var count = 0;


 $("#copy1").click(function(){
  var newId = count;
  $( "#first" ).clone().appendTo( "#container" ).prop({ id: newId, });
  tinyMCE.execCommand('mceAddControl',false,newId);
  count++;
  });

Answer 4

我遇到了类似的问题，除了我的元素ID（不仅仅是textareas）可能是任何东西，并且相同的ID总是出现两次。我所做的应该是非常低效，但页面上的数十个元素没有明显的性能损失。

基本上我首先删除了TinyMCE ID（使用jQuery）：

$(new_element).find('.mce-content-body').each(function () {
    $(this).removeAttr('id');
});

然后我重新初始化TinyMCE以获取所有相关元素。

如何通过cloneNode（true）函数为克隆的textarea编辑tinyMCE

4 个答案: