jquery - El complemento de TinyMCE 4 enlaces modal no es editable
twitter-bootstrap ruby-on-rails-3.2 (5)
Desde https://github.com/tinymce/tinymce/issues/782
Para los diálogos de jQuery UI puedes hacer esto:
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function(event) {
return !!$(event.target).closest(".mce-container").length || this._super( event );
}
});
Esta parece ser una solución más generalizada que podría modificar para Bootstrap:
$(document).on(''focusin'', function(e) {
if ($(e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
Estoy usando el editor tinyMCE4 dentro de un cuadro de diálogo modal de Boostrap. cuando hice clic en el ícono del enlace, se abre un nuevo cuadro de diálogo modal. Se muestra bien pero las áreas de entrada no son editables.
<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>
Alguna sugerencia
Gracias por adelantado
El ejemplo reportado en: http://fiddle.jshell.net/e99xf/13/show/light/
Funciona perfectamente para las versiones anteriores de bootstrap (2.3.2) y jQuery (1.8.3)
Intento lo mismo con las versiones más actualizadas y no funciona: Bootstrap 3.3.7 / jQuery 3.2.1
A continuación se muestra lo que estoy usando (recordando que el enlace que ingresó funciona perfectamente en las versiones anteriores de js).
PD. Estoy usando el editor de w3schools.com
$(document).on(''focusin'', (e) => {
if ($(e.target).closest(''.mce-window'').length) {
$(''.ModalHeader'').attr(''tabindex'', '''');
}
});
En mi caso se resolvió con el siguiente código:
<!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://.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>
Se encontró con este problema también. El código proporcionado por prabu en su JS Fiddle casi funcionó perfectamente.
Tuve que hacer una pequeña modificación para que funcionara para los campos de MoxieManager cuando también están abiertos.
$(document).on(''focusin'', function(e) {
if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
e.stopImmediatePropagation();
}
});
Esto permite editar imágenes o renombrar rutas de archivos en MoxieManager cuando se abre dentro de un Bootstrap Modal. Gracias por esto.
Tratar
event.stopImmediatePropagation ();
en lugar de
e.stopImmediatePropagation ();
Trabajó para mi