Closed brendanmcoffey closed 13 years ago
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="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fat"><img src="https://avatars.githubusercontent.com/u/169705?v=4" />fat</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <p>sounds like a bug with tinymce</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rossmerr"><img src="https://avatars.githubusercontent.com/u/115573?v=4" />rossmerr</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rob-lowcock"><img src="https://avatars.githubusercontent.com/u/547349?v=4" />rob-lowcock</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <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>$('.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>$('.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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fat"><img src="https://avatars.githubusercontent.com/u/169705?v=4" />fat</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <p>have you tried bringing it up with the the tinyMCE authors? Did they have any suggestions?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rob-lowcock"><img src="https://avatars.githubusercontent.com/u/547349?v=4" />rob-lowcock</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <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 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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rob-lowcock"><img src="https://avatars.githubusercontent.com/u/547349?v=4" />rob-lowcock</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <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><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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/rossmerr"><img src="https://avatars.githubusercontent.com/u/115573?v=4" />rossmerr</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <p>works nice thanks</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/brendanmcoffey"><img src="https://avatars.githubusercontent.com/u/1173176?v=4" />brendanmcoffey</a> commented <strong> 13 years ago</strong> </div> <div class="markdown-body"> <p>Yes, just got it working myself. Thanks BobLoco!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/icamys"><img src="https://avatars.githubusercontent.com/u/6891299?v=4" />icamys</a> commented <strong> 8 years ago</strong> </div> <div class="markdown-body"> <p>Here's a workaround for TinyMCE v4.3.11 and Bootstrap v3.3.5:</p> <p><a href="http://jsfiddle.net/e99xf/13/">http://jsfiddle.net/e99xf/13/</a></p> <p>Found <a href="https://github.com/tinymce/tinymce/issues/782">here</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/twbs-lmvtfy"><img src="https://avatars.githubusercontent.com/u/7893075?v=4" />twbs-lmvtfy</a> commented <strong> 8 years ago</strong> </div> <div class="markdown-body"> <p>Hi @icamys!</p> <p>You appear to have posted a live example (<a href="http://fiddle.jshell.net/e99xf/13/show/light/">http://fiddle.jshell.net/e99xf/13/show/light/</a>), which is always a good first step. However, according to <a 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 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 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 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 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 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 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. Thanks!</p> <p>(<em>Please note that this is a <a href="https://github.com/cvrebert/lmvtfy">fully automated</a> comment.</em>)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ErwanGuillon"><img src="https://avatars.githubusercontent.com/u/157569?v=4" />ErwanGuillon</a> commented <strong> 8 years ago</strong> </div> <div class="markdown-body"> <p>@icamys Thanks for your solution. It was a perfect fix for me.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/buttflattery"><img src="https://avatars.githubusercontent.com/u/1536454?v=4" />buttflattery</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>@icamys 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>$('.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><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> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Kayakman21"><img src="https://avatars.githubusercontent.com/u/11146844?v=4" />Kayakman21</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>Works great. Been searching for hours. Thank you icamys!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sbakhtiar"><img src="https://avatars.githubusercontent.com/u/47153658?v=4" />sbakhtiar</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@icamys 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>$(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: <a href="https://www.tiny.cloud/docs/integrations/bootstrap">https://www.tiny.cloud/docs/integrations/bootstrap</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/nikolaysm"><img src="https://avatars.githubusercontent.com/u/3074155?v=4" />nikolaysm</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Who use materializeCss, can use the solution below.</p> <pre><code>$.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 href="https://github.com/Dogfalo/materialize/issues/5972">https://github.com/Dogfalo/materialize/issues/5972</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/anindya-dhruba"><img src="https://avatars.githubusercontent.com/u/2575664?v=4" />anindya-dhruba</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>If someone is facing similar issue in <a href="https://react-bootstrap.github.io">react-bootstrap</a>, you can fix this issue by passing <code>enforceFocus={false}</code> prop to the <code><Modal></code> component.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/FactorSef"><img src="https://avatars.githubusercontent.com/u/38112845?v=4" />FactorSef</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>If someone is facing similar issue in <a href="https://ant.design">Ant Design</a>, you can fix this issue by passing <code>forceRender={true}</code> prop to the <Modal> component.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/SilverSurgePtyLtd"><img src="https://avatars.githubusercontent.com/u/113162660?v=4" />SilverSurgePtyLtd</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>$.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(); } } });</p> </blockquote> <p>Thank you so much! This worked for me.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
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