web-dev-qa-db-fra.com

TinyMCE 4 links plugin modal in non éditable

J'utilise tinyMCE4 editor dans un dialogue modal Boostrap. Lorsque je clique sur l'icône de lien, une nouvelle boîte de dialogue modale s'ouvre. Elle s'affiche correctement mais les zones de saisie ne sont pas modifiables.

<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>

enter image description here

Aucune suggestion 

Merci d'avance

jquerytwitter-bootstrapruby-on-rails-3.2tinymce-4tinymce-rails
30
prabu

De https://github.com/tinymce/tinymce/issues/782

Pour les dialogues jQuery UI, vous pouvez faire ceci:

$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(event.target).closest(".mce-container").length || this._super( event );
    }
});

Cela semble être une solution plus générale que vous pourrez peut-être modifier pour Bootstrap:

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});
61
Harry

Couru dans cette question aussi. Le code fourni par prabu sur son JS Fiddle fonctionnait presque parfaitement. 

Je devais y apporter une légère modification pour que cela fonctionne également pour les champs MoxieManager lorsqu'ils sont ouverts.

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
        e.stopImmediatePropagation();
    }
});

Cela permet d’éditer des images ou de renommer les chemins de fichiers dans MoxieManager lorsqu’il est ouvert dans un Bootal Modal. Merci pour cela.

7
AverageJoe

L'exemple rapporté à: http://fiddle.jshell.net/e99xf/13/show/light/

Fonctionne parfaitement pour les anciennes versions de bootstrap (2.3.2) et jQuery (1.8.3)

J'essaie la même chose avec les versions les plus récentes et cela ne fonctionne pas: Bootstrap 3.3.7/jQuery 3.2.1

Ci-dessous, voici ce que j’utilise (rappelons que le lien que vous avez entré fonctionne parfaitement dans les anciennes versions de js).

ps. J'utilise l'éditeur 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">&times;</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>
1
Felipe Leal

Essayer 

event.stopImmediatePropagation (); 

au lieu de 

e.stopImmediatePropagation ();

A travaillé pour moi

0
user3203126

Aucune des solutions présentées sur cette page ne semble fonctionner pour Firefox.

En chrome si je fais le code ci-dessous, cela conduit à un événement de focus. Si je change l'événement en paramètre e, il ne fonctionne pas en chrome.

L'événement qui le résout en chrome s'appelle Focus Event. Je n'ai pas réussi à trouver cela avec Firefox.

Quelqu'un l'a-t-il fonctionné dans Firefox?

$(document).on('focusin', (e) => {
    if ($(event.target).closest('.mce-window').length) {
      event.stopImmediatePropagation(); 
   }
});
0
grimur82

Dans mon cas, cela a été résolu avec le code suivant:

$(document).on('focusin', (e) => {
    if ($(e.target).closest('.mce-window').length) {
       $('.ModalHeader').attr('tabindex', '');
   }
});
0
Flavio H. Freitas