TinyMCE 4链接插件模式不可编辑
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TinyMCE 4链接插件模式不可编辑相关的知识，希望对你有一定的参考价值。
我在Bootstrap模式对话框中使用tinyMCE 4编辑器。当我点击链接图标时，它会打开一个新的模态对话框，它显示正常，但输入区域不可编辑。
<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>
有什么建议
提前致谢
来自https://github.com/tinymce/tinymce/issues/782
对于jQuery UI对话框，您可以这样做：
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function(event) {
return !!$(event.target).closest(".mce-container").length || this._super( event );
}
});
这似乎是一个更通用的解决方案，您可以为Bootstrap修改：
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
更新：
对于新版本的ag-grid（20.2.0），如果你使用银色主题，mce-window被重命名为tox-dialog，所以你可以改变目标类。
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-dialog").length) {
e.stopImmediatePropagation();
}
});
也涉及这个问题。 prabu在他的JS Fiddle上提供的代码几乎完美无缺。
我不得不对它进行一些修改，以便它们在打开时也适用于MoxieManager字段。
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
e.stopImmediatePropagation();
}
});
这允许在Bootstrap模式中打开时编辑MoxieManager中的图像或重命名文件路径。谢谢你。
报告的例子是：http://fiddle.jshell.net/e99xf/13/show/light/
适用于较旧版本的bootstrap（2.3.2）和jQuery（1.8.3）
我正在尝试使用最新版本，它不起作用：Bootstrap 3.3.7 / jQuery 3.2.1
下面是我正在使用的（记住你输入的链接在旧版本的js中完美运行）。
PS。我正在使用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>
尝试
event.stopImmediatePropagation（）;
代替
e.stopImmediatePropagation（）;
为我工作
在我的情况下，它使用以下代码解决：
$(document).on('focusin', (e) => {
if ($(e.target).closest('.mce-window').length) {
$('.ModalHeader').attr('tabindex', '');
}
});
此页面上的解决方案似乎都不适用于Firefox。
在chrome中，如果我执行下面的代码，则会导致焦点事件。如果我将事件更改为e参数，则它在chrome中不起作用。
在chrome中解决它的事件称为焦点事件。我还没有设法用Firefox找到它。
有人在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();
}
});
以前的答案似乎不适用于Bootstrap v4和TinyMCE v5。这是修改后的解决方案应该工作：
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-textfield").length)
e.stopImmediatePropagation();
});
以上是关于TinyMCE 4链接插件模式不可编辑的主要内容，如果未能解决你的问题，请参考以下文章