twitter-bootstrap TinyMCE 4 链接插件模式不可编辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18111582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TinyMCE 4 links plugin modal in not editable
提问by prabu
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.
我在 Boostrap 模式对话框中使用 tinyMCE4 编辑器。当我单击链接图标时，它会打开一个新的模式对话框，它显示正常，但输入区域不可编辑。
<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
提前致谢
回答by Harry
From https://github.com/tinymce/tinymce/issues/782
来自https://github.com/tinymce/tinymce/issues/782
For jQuery UI dialogs you can do this:
对于 jQuery UI 对话框，您可以这样做：
$.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:
这似乎是一个更通用的解决方案，您可以针对 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-windowwas renamed to tox-dialogso you can just change the target class.
对于新版本的 ag-grid (20.2.0)，如果你使用的是 Silver 主题，mce-window则重命名为tox-dialog所以你可以更改目标类。
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-dialog").length) {
e.stopImmediatePropagation();
}
});
回答by AverageJoe
Ran into this issue as well. The code provided by prabu on his JS Fiddle almost worked perfectly.
也遇到了这个问题。prabu 在他的 JS Fiddle 上提供的代码几乎完美无缺。
I had to make a slight modification to it so that it would work for the MoxieManager fields when they are open as well.
我必须对它稍作修改，以便它在打开时也适用于 MoxieManager 字段。
$(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.
这允许在 Bootstrap Modal 中打开时在 MoxieManager 中编辑图像或重命名文件路径。谢谢你。
回答by Felipe Leal
The example reported at: http://fiddle.jshell.net/e99xf/13/show/light/
该示例报告于：http: //fiddle.jshell.net/e99xf/13/show/light/
Works perfectly for the older versions of bootstrap (2.3.2) and jQuery (1.8.3)
适用于旧版本的 bootstrap (2.3.2) 和 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
我正在尝试使用最新版本，但它不起作用：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).
下面是我正在使用的（请记住，您输入的链接在旧版本的 js 中可以完美运行）。
ps. I'm using the w3schools.com editor
附：我正在使用 w3schools.com 编辑器
<!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>
回答by charlie
2019 solution:
2019年解决方案：
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
回答by RV_dutchman
The previous answer doesn't seem to work with Bootstrap v4 and TinyMCE v5. This is the modified solution should work:
先前的答案似乎不适用于 Bootstrap v4 和 TinyMCE v5。这是修改后的解决方案应该有效：
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-textfield").length)
e.stopImmediatePropagation();
});
回答by TommyTheG
my final workaround was to set the z-index of the appearing dialog higher than the z-index of the modal dialog. For example this would do the trick:
我最后的解决方法是将出现的对话框的 z-index 设置为高于模态对话框的 z-index。例如，这可以解决问题：
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root, .tox-dialog").length) {
$('.tox-dialog').css('z-index', '2003');
e.stopImmediatePropagation();
}
});
pretty sure that you can set the css globally too
非常确定您也可以全局设置 css
回答by tanmay
For all those who are using Material UI and looking for a solution : set disableEnforcedFocus = true in your Modal/Dialog... This is because by default material ui gets the focus and whaterver component you open on that it will not get the focus so you have to do it manually.
对于所有使用 Material UI 并寻找解决方案的人：在您的 Modal/Dialog 中设置 disableEnforcedFocus = true...这是因为默认情况下，Material ui 获得焦点，而您打开的任何组件都不会获得焦点，所以你必须手动完成。
回答by Flavio H. Freitas
In my case it was solved with the following code:
在我的情况下，它是通过以下代码解决的：
$(document).on('focusin', (e) => {
if ($(e.target).closest('.mce-window').length) {
$('.ModalHeader').attr('tabindex', '');
}
});
回答by user3203126
Try
尝试
event.stopImmediatePropagation();
event.stopImmediatePropagation();
instead of
代替
e.stopImmediatePropagation();
e.stopImmediatePropagation();
Worked for me
对我来说有效
回答by grimur82
None of the solutions on this page seem to work for Firefox.
此页面上的所有解决方案似乎都不适用于 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.
在 chrome 中，如果我执行下面的代码，它会导致焦点事件。如果我将 event 更改为 e 参数，则它在 chrome 中不起作用。
The event which solves it in chrome is called Focus Event. I have not managed to find this with Firefox.
在 chrome 中解决它的事件称为焦点事件。我还没有设法用 Firefox 找到这个。
Anyone got it working in Firefox ?
有人在 Firefox 中使用过它吗？
$(document).on('focusin', (e) => {
if ($(event.target).closest('.mce-window').length) {
event.stopImmediatePropagation();
}
});
