Javascript 如何通过cloneNode（true）函数使克隆的textarea的tinyMCE可编辑_Javascript_Tinymce

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

javascript tinymce

Javascript 如何通过cloneNode（true）函数使克隆的textarea的tinyMCE可编辑,javascript,tinymce,Javascript,Tinymce,当我尝试使用cloneNote（true）克隆textarea时，克隆的textarea不可编辑。有人知道如何解决这个问题吗？示例代码如下所示： <html> <head> <script type="text/javascript" src="/javascripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({

当我尝试使用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>


tinyMCE.init({
主题：“高级”，
模式：“文本区域”，
});
testclonenode={
addover：函数（元素）{
var rowEl=element.parentNode.parentNode.parentNode；
var rowElClone=rowEl.cloneNode（true）；
rowEl.parentNode.insertBefore（rowElClone，rowEl）；
返回false；
}
};
这是一个测试
加在上面

它不是那样工作的。此外，不可能使用dom操作移动tinymce编辑器

tinymce wiki声明如下：

<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>

mceAddControl

转换指定的textarea或div 进入具有指定ID

例如：

tinyMCE.execCommand('mceAddControl',false,'mydiv');

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

我通过使用一个id来实现这一点，该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);

var insertslideID=0；
函数slideclone（）{
$（''）.insertAfter（'div.slides:last'）；
execCommand（'mceAddControl'，false，'mydiv'+insertslideID）；
insertslideID++；
}
$（'input[name=addaslidebtn]'）。单击（slideclone）；

看起来很有效。

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

var count = 0;


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

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

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

然后我重新初始化了所有相关元素的TyMyCE。

很高兴能够帮助（请考虑投票回答我的问题并接受它）。