I am using tinyMCE4 editor inside a Boostrap modal dialog. when I clicked on link icon it opens a new modal dialog box, It displayed fine but the input areas are not editable.
<div id="editing" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form>
<label>
<span>Description</span>
<div id="description"></div>
</label>
<form>
</div>
<script>
tinymce.init({
selector: 'div#description',
inline: false,
theme : "modern",
schema: "html5",
add_unload_trigger: false,
statusbar: false,
plugins: "link",
toolbar: "link | undo redo",
menubar: false
});
</script>
Any suggestions
Thanks in advance
From https://github.com/tinymce/tinymce/issues/782
For jQuery UI dialogs you can do this:
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function(event) {
return !!$(event.target).closest(".mce-container").length || this._super( event );
}
});
This seems to be a more generalized solution that you might be able to modify for Bootstrap:
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
Update:
For the new version of ag-grid (20.2.0), if you are using the silver theme, mce-window was renamed to tox-dialog so you can just change the target class.
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-dialog").length) {
e.stopImmediatePropagation();
}
});
Ran into this issue as well. The code provided by prabu on his JS Fiddle almost worked perfectly.
I had to make a slight modification to it so that it would work for the MoxieManager fields when they are open as well.
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
e.stopImmediatePropagation();
}
});
This allows for editing images or renaming file paths in the MoxieManager when opened inside a Bootstrap Modal. Thanks for this.
The example reported at: http://fiddle.jshell.net/e99xf/13/show/light/
Works perfectly for the older versions of bootstrap (2.3.2) and jQuery (1.8.3)
I'm trying the same with the most up-to-date versions and it does not work: Bootstrap 3.3.7 / jQuery 3.2.1
Below is what I'm using (remembering that the link you entered works perfectly in the old versions of the js).
ps. I'm using the w3schools.com editor
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"type=" text/javascript"></script>
</head>
<body>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
tinymce.init({
selector: "textarea",
width: '100%',
height: 270,
plugins: [ "anchor link" ],
statusbar: false,
menubar: false,
toolbar: "link anchor | alignleft aligncenter alignright alignjustify",
rel_list: [ { title: 'Lightbox', value: 'lightbox' } ]
});
/**
* this workaround makes magic happen
* thanks @harry: http://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable
*/
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
});//]]>
</script>
<div class="container">
<h2>Modal Example</h2>
<div class="col-sm-8">
<div class="form-group">
<br>
<label for="BL_DEF_MASCARA" class="control-label">Texto a ser exibido</label>
<br>
<div class="help-block with-errors"></div>
</div>
</div>
<br>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="100" class="form-control" name="BL_DEF_MASCARA"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try
event.stopImmediatePropagation();
instead of
e.stopImmediatePropagation();
Worked for me
In my case it was solved with the following code:
$(document).on('focusin', (e) => {
if ($(e.target).closest('.mce-window').length) {
$('.ModalHeader').attr('tabindex', '');
}
});
None of the solutions on this page seem to work for Firefox.
In chrome if I do the code below, it leads to a focus event. If I change event to the e parameter, it does not work in chrome.
The event which solves it in chrome is called Focus Event. I have not managed to find this with Firefox.
Anyone got it working in Firefox ?
$(document).on('focusin', (e) => {
if ($(event.target).closest('.mce-window').length) {
event.stopImmediatePropagation();
}
});
2019 solution:
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
The previous answer doesn't seem to work with Bootstrap v4 and TinyMCE v5. This is the modified solution should work:
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-textfield").length)
e.stopImmediatePropagation();
});
来源：https://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable