Loading a TinyMCE WSIWYG field and then popping it up in the modal causes the text field to become uneditable. The text that should be inside the tags disappears as well.</p> </div> <div> <div class="float-right"> <a class="text-muted" href="https://www.github.com/twbs/bootstrap/issues/549" 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://avatars3.githubusercontent.com/u/1173176?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>brendanmcoffey</strong> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> </div> <div class="col-12"> <div id="ph-above-best-comment"> </div> </div> <div class="col-12 mb-4 best-comment"> <div> <h2 class="mb-3"><i class="fas fa-check mr-2"></i>Most helpful comment</h2> </div> <div class="card card-custom border-lg-success mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Here's a workaround for TinyMCE v4.3.11 and Bootstrap v3.3.5:</p> <p><a rel="nofollow noopener" target="_blank" href="http://jsfiddle.net/e99xf/13/">http://jsfiddle.net/e99xf/13/</a></p> <p>Found <a rel="nofollow noopener" target="_blank" href="https://github.com/tinymce/tinymce/issues/782">here</a>.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/6891299?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt=" picture"> <strong>icamys</strong> <span class="text-muted ml-1">on 10 May 2016</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">7</span> </div> </div> </div> </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 15 comments</h2> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>sounds like a bug with tinymce</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/169705?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="fat picture"> <strong>fat</strong> <span class="text-muted ml-1">on 6 Nov 2011</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>This also happens to ckeditor and punymce going to try YUI 2 Rich Text Editor tomorrow, so this looks more like a problem with bootstrap</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/115573?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rossmerr picture"> <strong>rossmerr</strong> <span class="text-muted ml-1">on 15 Nov 2011</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 found the beginnings of a workaround for this problem with TinyMCE. If you bind a new instance of TinyMCE to the modal "shown" event, then it seems to work reasonably well. The one problem with this is that if you open a modal, close it, and open it again, the TinyMCE instance doesn't work</p> <p>Here's my code (to be placed before the closing body tag):</p> <pre><code class="prettyprint">$('.the-modal').bind('shown', function() { $('textarea.tinymce-modal').tinymce({ // TinyMCE Options }); }); </code></pre> <p><strong>EDIT</strong> If you have just one modal, then adding this code as well will solve the issue. If you have multiple modals, then you can't close one and open another with TinyMCE still working:</p> <pre><code class="prettyprint">$('.the-modal').bind('hidden', function() { $('textarea.tinymce-modal').tinymce().remove(); }); </code></pre> <p>I tried using <code>.destroy();</code> but that seems to interrupt the javascript for the modal itself</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/547349?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rob-lowcock picture"> <strong>rob-lowcock</strong> <span class="text-muted ml-1">on 16 Nov 2011</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>have you tried bringing it up with the the tinyMCE authors? Did they have any suggestions?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/169705?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="fat picture"> <strong>fat</strong> <span class="text-muted ml-1">on 16 Nov 2011</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 have to confess I only came across this post via a quick Google, so I haven't been looking too hard! Also, it appears TinyMCE only provide support for paid licenses. Nevertheless, I have found this discussion on the TinyMCE forums: <a rel="nofollow noopener" target="_blank" href="http://www.tinymce.com/forum/viewtopic.php?id=26541">http://www.tinymce.com/forum/viewtopic.php?id=26541</a></p> <p>I'm now having a play with Firebug and seeing if I can find a better workaround using <code>tinyMCE.execCommand('mceAddControl', false, 'mce');</code> which may involve using the same ID more than once in some truly hideous code! I'm slightly concerned that <code>.destroy()</code> affects the modal itself, although that might be just how jQuery works.</p> <p>Most of this seems to be a TinyMCE thing, although I can't vouch for the issues with ckeditor and punymce which may need looking into</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/547349?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rob-lowcock picture"> <strong>rob-lowcock</strong> <span class="text-muted ml-1">on 16 Nov 2011</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Right: a relatively complete workaround.</p> <p>You need to apply TinyMCE to the textarea after the modal has appeared, and then remove it if the modal is hidden. You don't have to necessarily initialise TinyMCE all over again, but you do have to make sure it's applied to the textarea. If you have multiple modals and textareas, they all have to have separated IDs In my case, I'm putting the below code after each modal (fortunately in a PHP loop, note the PHP shorthand of <code><?=$reply["id"]?></code>)</p> <pre><code class="prettyprint"><script type="text/javascript"> $('.the-modal').bind('shown', function() { tinyMCE.execCommand('mceAddControl', false, 'mce-<?=$reply["id"]?>'); }); $('.the-modal').bind('hide', function() { tinyMCE.execCommand('mceRemoveControl', false, 'mce-<?=$reply["id"]?>'); }); </script> </code></pre> <p>I have no idea what sort of an impact this will have on performance on a fully-fledged site as I'm only testing this on localhost, but it seems to work.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/547349?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rob-lowcock picture"> <strong>rob-lowcock</strong> <span class="text-muted ml-1">on 16 Nov 2011</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>works nice thanks</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/115573?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rossmerr picture"> <strong>rossmerr</strong> <span class="text-muted ml-1">on 16 Nov 2011</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>Yes, just got it working myself. Thanks BobLoco!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/1173176?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="brendanmcoffey picture"> <strong>brendanmcoffey</strong> <span class="text-muted ml-1">on 16 Nov 2011</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>Here's a workaround for TinyMCE v4.3.11 and Bootstrap v3.3.5:</p> <p><a rel="nofollow noopener" target="_blank" href="http://jsfiddle.net/e99xf/13/">http://jsfiddle.net/e99xf/13/</a></p> <p>Found <a rel="nofollow noopener" target="_blank" href="https://github.com/tinymce/tinymce/issues/782">here</a>.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/6891299?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="icamys picture"> <strong>icamys</strong> <span class="text-muted ml-1">on 10 May 2016</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">7</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi @icamys!</p> <p>You appear to have posted a live example (http://fiddle.jshell.net/e99xf/13/show/light/), which is always a good first step. However, according to <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint">Bootlint</a>, <strong>your example has some Bootstrap usage errors</strong>, which might potentially be causing your issue:</p> <ul> <li>line 97, column 1: <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint/wiki/E032">E032</a>: <code>.modal-header</code> must be a child of <code>.modal-content</code></li> <li>line 97, column 1: <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint/wiki/E032">E032</a>: <code>.modal-body</code> must be a child of <code>.modal-content</code></li> <li>line 97, column 1: <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint/wiki/E032">E032</a>: <code>.modal-footer</code> must be a child of <code>.modal-content</code></li> <li>line 97, column 1: <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint/wiki/E040">E040</a>: <code>.hide</code> should not be used on <code>.modal</code> in Bootstrap v3.</li> <li>line 110, column 9: <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint/wiki/W007">W007</a>: Found one or more <code><button></code>s missing a <code>type</code> attribute.</li> <li>line 39, column 7: <a rel="nofollow noopener" target="_blank" href="https://github.com/twbs/bootlint/wiki/W013">W013</a>: Bootstrap version might be outdated. Latest version is at least 3.3.6 ; saw what appears to be usage of Bootstrap 2.3.2</li> </ul> <p>You'll need to <strong>fix these errors</strong> and post a revised example before we can proceed further.<br /> Thanks!</p> <p>(_Please note that this is a <a rel="nofollow noopener" target="_blank" href="https://github.com/cvrebert/lmvtfy">fully automated</a> comment._)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/7893075?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="twbs-lmvtfy picture"> <strong>twbs-lmvtfy</strong> <span class="text-muted ml-1">on 10 May 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@icamys</strong> Thanks for your solution. It was a perfect fix for me.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/157569?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ErwanGuillon picture"> <strong>ErwanGuillon</strong> <span class="text-muted ml-1">on 30 Nov 2016</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>@icamys</strong> Your or any of the above solutions work only for the static content, means if the form that you are opening in the Modal window is in the same page/view but if you try to load the content from a url with a custom anchor like </p> <p><code><a id="modalUpdateButton" class="grid-action modalButton" value="/post/modal" href="/post/modal.php" title="Updating Ticket: "><span class="glyphicon glyphicon-pencil"></span></a></code></p> <p>and bind the modal with this button using </p> <pre><code class="prettyprint">$('.modalButton').on('click',function (e) { $('#modal').modal('show') .find('#modalContent') .load($(this).attr('value')); e.preventDefault(); }); </code></pre> <p>with the following default HTML </p> <pre><code class="prettyprint"><div id="modal" class="fade modal" role="dialog" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div id="modalHeader" class="modal-header"> <button type="button" id="close-button" class="btn btn-warning pull-right modalClose" data-dismiss="modal" aria-hidden="true">Close</button> <span id="modalHeaderTitle"></span> </div> <div class="modal-body"> <div id="message"></div><div id="modalContent"></div> </div> </div> </div> </div> </code></pre> <p>It does not work where ever you try to load the <code>focusin</code> from the main page or the view from where the form is loaded</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/1536454?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="buttflattery picture"> <strong>buttflattery</strong> <span class="text-muted ml-1">on 1 May 2018</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>Works great. Been searching for hours. Thank you icamys!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars3.githubusercontent.com/u/11146844?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Kayakman21 picture"> <strong>Kayakman21</strong> <span class="text-muted ml-1">on 20 Sep 2018</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>@icamys</strong> Thank you!! I have been playing with this for days using Bootstarp 4 with TinyMCE 5.</p> <p>Actually everything was working except the link dialog (I could not click in any of the fields). Once I came across your solution it took a little digging but I found I needed to use the .tox-dialog instead of .mce-window (which is the pop div TinyMCE 5 is using). </p> <pre><code class="prettyprint">$(document).on('focusin', function(e) { if ($(e.target).closest(" .tox-dialog").length) { e.stopImmediatePropagation(); } }); </code></pre> <p>There own documentation says to use .mce-window but that made no difference for my implementation so I'm wondering if this is just a case of old documentation based on TinyMCE 4:<br /> <a rel="nofollow noopener" target="_blank" href="https://www.tiny.cloud/docs/integrations/bootstrap">https://www.tiny.cloud/docs/integrations/bootstrap</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/47153658?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sbakhtiar picture"> <strong>sbakhtiar</strong> <span class="text-muted ml-1">on 27 Feb 2019</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>Who use materializeCss, can use the solution below.</p> <pre><code class="prettyprint">$.extend(M.Modal.prototype, { _handleFocus(e) { if (!this.el.contains(e.target) && this._nthModalOpened === M.Modal._modalsOpen && document.defaultView.getComputedStyle(e.target, null).zIndex < 1002) { this.el.focus(); } } }); </code></pre> <p>Fix by @sigma-technology, <a rel="nofollow noopener" target="_blank" href="https://github.com/Dogfalo/materialize/issues/5972">https://github.com/Dogfalo/materialize/issues/5972</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/3074155?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="nikolaysm picture"> <strong>nikolaysm</strong> <span class="text-muted ml-1">on 15 May 2020</span> </div> <div class="col text-right"> </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(2147417, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(2147417, 1);" onclick="rate(2147417, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(2147417, 2);" onclick="rate(2147417, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(2147417, 3);" onclick="rate(2147417, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(2147417, 4);" onclick="rate(2147417, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(2147417, 5);" onclick="rate(2147417, 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="/bootstrap/144851186/angularjs-bootstrap">angularjs/bootstrap</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/13852687?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ziyi2 picture"> <strong class="pr-1" dir="ltr">ziyi2</strong> 路 <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/bootstrap/157052368/modal-dialog-on-narrow-sm-screen-has-no-horizontal-margin">.modal-dialog on narrow SM screen has no horizontal margin</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/419884?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="cvrebert picture"> <strong class="pr-1" dir="ltr">cvrebert</strong> 路 <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/bootstrap/140047104/z-index-issue-on-dropdowns">Z-Index issue on dropdowns</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/1902974?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="devdelimited picture"> <strong class="pr-1" dir="ltr">devdelimited</strong> 路 <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/bootstrap/6369453/affix-plugin-doesn-t-work-well-in-tables">affix plugin doesn't work well in tables</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/198821?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="leomao10 picture"> <strong class="pr-1" dir="ltr">leomao10</strong> 路 <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/bootstrap/179396960/include-from-and-to-indexes-in-carousel-slide-bs-carousel">Include `from` and `to` indexes in Carousel `slide.bs.carousel` and `slid.bs.carousel` event</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/744949?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="MrCsabaToth picture"> <strong class="pr-1" dir="ltr">MrCsabaToth</strong> 路 <span class="px-1" dir="ltr">3</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/twbs/bootstrap/issues/549" 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>