Hello, I am trying to load SunEditor to multiple fields on the same page.</p> <p>All my <textarea> tags are assigned the same id <textarea id="suneditor">, however, I am getting an error </p> <p>Uncaught Error: [SUNEDITOR.create.fail] The ID of the suneditor you are trying to create already exists (ID:"suneditor")<br /> at Object.create (suneditor.min.js:1)<br /> at Object.<anonymous> (suneditor.min.js:1)<br /> at (index):3783</p> <p>Is there an established workaround for that?</p> <p>Many thanks,</p> </div> <div> <span class="badge badge-primary">question</span> <div class="float-right"> <a class="text-muted" href="https://www.github.com/JiHong88/SunEditor/issues/542" rel="nofollow noreferrer" target="_blank" onclick="dataLayer.push({'event': 'GAEvent', 'eventCategory': 'click', 'eventAction': 'source_bottom', 'eventLabel': 'Source Bottom', 'eventValue': undefined});">Source</a> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/61521619?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>ATOPBIO</strong> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </div> </div> <div class="col-12"> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="9295564578" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="col-12 d-flex align-items-center mb-4"> <h2>All 7 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@ATOPBIO</strong> ID attributes must be unique.</p> <pre><code class="prettyprint"><textarea id="id1"/> <textarea id="id2"/> </code></pre> <pre><code class="prettyprint">const instance1 = suneditor.create("id1") const instance2 = suneditor.create("id2") // or suneditor.create(document.getElementById("id2")) </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13191953?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="JiHong88 picture"> <strong>JiHong88</strong> <span class="text-muted ml-1">on 1 Nov 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>That is not workable when you have text areas generated, on the page, for example I create new post, and each post allows editing, so each edit box needs an instance.</p> <p>I would suggest that the editor automatically gets assigned to all instances of the same ID maybe at the next update.</p> <p>Thank you for your response and nevertheless, Suneditor is a great and robust editor, well done.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/61521619?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ATOPBIO picture"> <strong>ATOPBIO</strong> <span class="text-muted ml-1">on 1 Nov 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Perhaps we can use something alternatiing to document.getElementsByClassName()</p> <p>To assign to one class with multiple instances rather than IDs?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/61521619?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ATOPBIO picture"> <strong>ATOPBIO</strong> <span class="text-muted ml-1">on 1 Nov 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@ATOPBIO</strong> One instance per <code>textarea</code>.<br /> To create multiple editor instances within a page,<br /> you need to define multiple <code>textarea</code> and create editor instances for each <code>textarea</code>.</p> <p>Am I misunderstanding the question?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13191953?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="JiHong88 picture"> <strong>JiHong88</strong> <span class="text-muted ml-1">on 2 Nov 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I am using SunEditor in a comments box, with a 'reply' feature, means every textarea needs a new script.</p> <p>I am trying to write one script and render on all textareas within the same page. </p> <p>After doing some research I came to realise applying JS to a CLASS will apply to all classes, something alternating to<br /> document.getElementsByClassName()</p> <p>I am not able to get that to work yet. Will keep trying.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/61521619?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ATOPBIO picture"> <strong>ATOPBIO</strong> <span class="text-muted ml-1">on 2 Nov 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Since individual instances are created per editor, "create" must be called multiple times.<br /> Even if you take the "textarea" as an array, only the last instance of the editor created will remain.<br /> EX)</p> <pre><code class="prettyprint">const reply = document.getElementsByClassName("claass") for (let i = 0; i < reply.length; i++) { suneditor.create(reply[i], {}) } </code></pre> <p>And.. maybe it is better to create a new editor each time unless the editors need to exist at the same time.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13191953?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="JiHong88 picture"> <strong>JiHong88</strong> <span class="text-muted ml-1">on 3 Nov 2020</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@ATOPBIO</strong>,<br /> I use function like this:<br /> <code>function editor(id) { SUNEDITOR.create(id, { mode: 'classic', ... });</code></p> <p>In footer these JQ-each's works as you expect and make multiple instances of editors.<br /> <code> $(".record").each(function () { editor($(this).attr("id")); // id = raw_1 }); </code></p> <p>PHP fragment:</p> <pre><code class="prettyprint"><?php while(current($record)): ?> <textarea class="sun-editor-editable record" id="<?=key($record)?>_<?=$record['id']?>"> <?php echo $record[key($record)]; next($record)?> </textarea> <?php endwhile; ?> </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13215239?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="vasotelvi picture"> <strong>vasotelvi</strong> <span class="text-muted ml-1">on 23 Mar 2021</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(733768258, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(733768258, 1);" onclick="rate(733768258, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(733768258, 2);" onclick="rate(733768258, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(733768258, 3);" onclick="rate(733768258, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(733768258, 4);" onclick="rate(733768258, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(733768258, 5);" onclick="rate(733768258, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/suneditor/276683438/can-you-modularize-sun-editor-to-reduce-file-size">Can you modularize sun editor to reduce file size?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/7881511?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="drnkwati picture"> <strong class="pr-1" dir="ltr">drnkwati</strong> · <span class="px-1" dir="ltr">8</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/suneditor/773036479/add-options-follow-or-nofollow-for-links">Add options, follow or nofollow for links</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/36485982?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Saeeed-B picture"> <strong class="pr-1" dir="ltr">Saeeed-B</strong> · <span class="px-1" dir="ltr">7</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/suneditor/824133453/how-to-disable-double-click-event-on-pargraph">How to disable double click event on pargraph</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/7057776?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="crying2812 picture"> <strong class="pr-1" dir="ltr">crying2812</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/suneditor/647179423/seutail-jeogyong-beogeu-jebo">스타일 적용 버그 제보 </a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/12293586?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="chbin05 picture"> <strong class="pr-1" dir="ltr">chbin05</strong> · <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/suneditor/476999613/feature-request-add-option-to-use-iframe-to-edit-full-page">Feature Request: Add option to use `<iframe>` to edit full page</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/71916?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sirlancelot picture"> <strong class="pr-1" dir="ltr">sirlancelot</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/JiHong88/SunEditor/issues/542" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>