开发者

how to get tinyMCE editable for a cloned textarea by cloneNode(true) function

开发者 https://www.devze.com 2023-01-29 09:29 出处:网络
When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:

When I try to clone a textarea by using cloneNote(true), the cloned textarea is not editable. Does anyone know how to resolve the problem? The sample codes show as following:

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


It does not work that way. Also, it is impossible to move a tinymce editor using dom manipulation.

The tinymce wiki states the following:

mceAddControl

Converts the specified textarea or div into an editor instance having the specified ID.

Example:

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

So when you clone a textarea there is another problem: You will have the same id twice which will result in errors accessing the right tinymce instance.


I got this to work by using an ID which is incremented each time my clone function is triggered, so

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

Seems to work.


A wee bit tidier, I just use a number for my id - copy1 is the name of my button - I add the new element to the end of my container.

var count = 0;


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


I ran into a similar problem, except my element IDs (not just textareas) could be anything, and the same ID was always appearing twice. What I did is supposed to be horribly inefficient but there was no noticeable performance loss with dozens of elements on the page.

Basically I removed the TinyMCE ID first (uses jQuery):

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

Then I reinitialized TinyMCE for all relevant elements.

0

精彩评论

暂无评论...
验证码 换一张
取 消