👩🏽‍🚀 😱 🥢 Move TinyMCE with jQuery

<body>
  
  <header class="page-header js-page-header">
    <a class="page-header-logo-container" href="https://geek-questions.imtqy.com/index.html"></a>
    <div class="page-header-text">All geek questions in one place</div>
  </header>
  <section class="page js-page"><div itemscope="" itemtype="http://schema.org/QAPage" class="page"><div class="main-col" itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question"><div class="question-header"><h1 itemprop="name">  Move TinyMCE with jQuery </h1></div><div class="question"><div class="question-row"><div class="question-text"><div class="description" itemprop="text"><p> I have 2 (or more) <code><textarea></code> initialized by TinyMCE-3.4.8-jQuery in <code><ul></code> . </p><pre class="prettyprint-override"> <code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bc1"</span>></span><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blockcontent"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bc2"</span>></span><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blockcontent"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bc3"</span>></span><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blockcontent"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code> </pre><p>  The "block content" will be initialized with <code>$('.blockcontent').tinymce({...});</code>  . </p><p>  If I enter # bc3 after # bc1 with <code>$('#bc3').insertAfter($('#bc1'));</code>  , the content will be deleted.  The contents of text box # text3 are no longer available.  It has disappeared.  How to fix it? </p><p>  I also tried to clone # bc3 <code>$('#bc3').clone(true, true)</code> , insert the clone after # bc1 and delete the original # bc3.  To fix jQuery Input Clone Bug error, I used <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="nofollow noreferrer">jquery.fix.clone jQuery plugin</a> .  But the clone method also has the same problem as the insertAfter method.  Perhaps insertAfter does the same: clone and delete.  I don’t know anything.  If I delete the original first and then insert the clone, TinyMCE will not be available in the clone, but the contents of the cloned text area will be available.  If I first insert the clone and then delete the original, accessible by TinyMCE, but not the original content. </p><p>  Vg </p></div><div class="favorite hidden"><i class="far fa-star"></i></div><div class="votes-question"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +4 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="tags">  <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'jquery'" rel="tag">jquery</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'html'" rel="tag">html</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'clone'" rel="tag">clone</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'tinymce'" rel="tag">tinymce</a> <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" class="tag" title="show questions tagged with 'insertafter'" rel="tag">insertafter</a> </div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">Thefox</a></span></span> <time title="2012-03-02 14:23" itemprop="dateCreated" datetime="2012-03-02T14:23:03+0000">  Mar 2  '12 at 14:23 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><ins style="height: 90px;display: block;" data-zxname="zx-adnet" data-zxadslot="ZX-QRST" data-zxw="0" data-zxh="90" data-zxid="2" data-overlay="false"></ins><div class="answers " id="answers_hash"><div class="answers-header">  <span class="pull-left"><span itemprop="answerCount">1</span> answer</span> <div class="clearfix"></div></div><div class="answer-pager hidden"></div><div class="answer accepted last rltd" id="4363352_hash" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer"><div class="answer-row"><div class="answer-text"><div class="desc" itemprop="text"><p>  Moving tinymce to the DOM does not work the way you would like it here.  Before moving it, you need to call <code>mceRemoveControl</code> , and then after moving the original editor element, you can reinitialize the editor. </p><p>  Cloning will result in identical identifiers.  Tinymce does not allow identical identifiers.  It’s better to make sure that your html source elements have a unique identifier (not one). </p></div><div class="votes-answer"><i class="glyphicon glyphicon-arrow-ups"></i><div class="vote-count greenc" itemprop="upvoteCount">  +4 </div><i class="glyphicon glyphicon-arrow-down"></i></div><div class="clearfix"></div><div class="action-time">  <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" rel="noopener" target="_blank">Thariama</a></span></span> <time title="2012-03-02 14:51" itemprop="dateCreated" datetime="2012-03-02T14:51:14+0000">  Mar 2  '12 at 14:51 </time></div>  <a class="aa-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" target="_blank" rel="noopener">source</a> <a itemprop="url" class="s-link" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=" title="share">share</a> <div class="clearfix"></div></div></div></div><ins style="height: 90px;display: block;margin-top: 15px;" data-zxname="zx-adnet" data-zxadslot="ZX-QRST" data-zxw="0" data-zxh="90" data-zxid="3" data-overlay="false"></ins><div class="answer-pager hidden"></div></div></div></div><p>Source: <a rel="nofollow" href="https://habr.com/ru/post/1399401/">https://habr.com/ru/post/1399401/</a></p>
<section class="more-articles-navigation-panel js-more-articles-navigation-panel">
<h4>More articles:</h4>
<nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages">
<li><a href="../1399396/index.html">Hit test rectangles - c ++</a></li>
<li><a href="../1399397/index.html">Enumerates list 2, saves the result in a tuple in python - python</a></li>
<li><a href="../1399398/index.html">get path from module name - python</a></li>
<li><a href="../1399399/index.html">HashMap synchronization for map with incrementation value - java</a></li>
<li><a href="../1399400/index.html">Slim Framework → Create XML Output - xml</a></li>
<li><a href="../1399403/index.html">Asp.net SQL Server 2008 search function and fixed time - c #</a></li>
<li><a href="../1399404/index.html">New Ruby 1.9 hash syntax - ruby | fooobar.com</a></li>
<li><a href="../1399405/index.html">How to extract real file URI or file data from a path that looks like "/ content: / media / external / video / media / 19"? - android</a></li>
<li><a href="../1399406/index.html">Canvas - Using custom fonts - html5-canvas</a></li>
<li><a href="../1399407/index.html">A high processor, perhaps due to context switching? - java</a></li>
</ul></nav>
</section><br />
<a href="../../allArticles.html"><strong>All Articles</strong></a>
<script src="../../js/main.js"></script>

<script type="text/javascript" >
  (function (d, w, c) {
      (w[c] = w[c] || []).push(function() {
          try {
              w.yaCounter62683636 = new Ya.Metrika({
                  id:62683636,
                  clickmap:true,
                  trackLinks:true,
                  accurateTrackBounce:true,
                  webvisor:true
              });
          } catch(e) { }
      });

var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script"),
          f = function () { n.parentNode.insertBefore(s, n); };
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
          d.addEventListener("DOMContentLoaded", f, false);
      } else { f(); }
  })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/62683636" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-166339405-1', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>

</section>

<footer class="page-footer">
  <div class="page-footer-legal-info-container page-footer-element">
    <p>
      Geek Questions | <span class="page-footer-legal-info-year js-page-footer-legal-info-year">2019</span>
    </p>
  </div>
  <div class="page-footer-counters-container page-footer-element">
    <a class="page-footer-counter-clustrmap" href='#'  title='Visit tracker'><img src='https://clustrmaps.com/map_v2.png?cl=698e5a&w=271&t=t&d=x9KFE5t3Mv44EqtuX_BNXcB69A0sIUZAkKxnezcia0Y&co=3a3a3a&ct=ffffff'/></a>
  </div>
</footer>
  
</body>

</html>