Bootstrap Modal mit Inline TinyMCE Dropdown-Menü Elemente falsch ausgerichtet

Question

Ich verwende Inline-TinyMCE in einem Bootstrap-Modal und beim Öffnen eines Dropdown-Menüelements zB: "Formate" werden die Elemente in der oberen linken Ecke ausgerichtet angezeigt der Seite, statt wo sie erscheinen sollten.

Haben Sie Ideen, wie Sie dieses Problem lösen können?

Es gibt noch ein weiteres Problem beim Einfügen von Links. Wenn Sie auf den Menüeintrag Link klicken, wird das TinyMCE-Modell geöffnet, aber Sie können nichts an den Eingaben eingeben.

gefunden Lösung für dieses letzte Problem dabei:tinyMCE in a bootstrap dialog.

Repro auf this js fiddle.

tinymce.init({ 
 
    selector: 'h2.editable', 
 
    inline: true, 
 
    toolbar: 'undo redo', 
 
    menubar: false 
 
}); 
 

 
tinymce.init({ 
 
    selector: 'div.editable', 
 
    inline: true, 
 
    plugins: [ 
 
    'advlist autolink lists link image charmap print preview anchor', 
 
    'searchreplace visualblocks code fullscreen', 
 
    'insertdatetime media table contextmenu paste' 
 
    ], 
 
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
 
    content_css: [ 
 
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
 
    '//www.tinymce.com/css/codepen.min.css' 
 
    ] 
 
});

h2.mce-content-body { 
 
    font-size: 200%; 
 
    padding: 0 25px 0 25px; 
 
    margin: 10px 0 10px 0; 
 
} 
 

 
body { 
 
    background: transparent; 
 
} 
 

 
.content { 
 
    overflow: visible; 
 
    position: relative; 
 
    width: auto; 
 
    margin-left: 0; 
 
    min-height: auto; 
 
    padding: inherit; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="editable"> 
 
      <h2><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" style="float: right" />TinyMCE Inline Mode</h2> 
 
      <p> 
 
      This is an editable div element. 
 
      </p> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo. Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet 
 
      euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida. Sed semper ante sed dui consectetur eget commodo eros imperdiet. Mauris magna diam, scelerisque at ornare vel, dignissim ac sem. Fusce id congue 
 
      lacus. Duis sit amet tellus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus mattis facilisis pretium. In in nibh eu urna ornare semper. Sed imperdiet felis vitae nibh sagittis eu pulvinar 
 
      metus facilisis. Sed dolor orci, aliquet sagittis auctor id, faucibus at justo. 
 
      </p> 
 
      <p> 
 
      Vestibulum vestibulum velit nec magna lobortis elementum. Ut egestas ultrices tincidunt. Sed vestibulum mi vitae dui interdum eget rhoncus neque faucibus. Ut nec leo tellus. Nunc in metus sit amet purus bibendum dignissim pulvinar quis erat. Quisque vel 
 
      ultricies nisi. Vestibulum eu ante risus. In ultrices dignissim massa, vel luctus dui consequat quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

Es scheint auf den Modal ein Problem mit tabindex="-1" Attribut zu sein. Wenn Sie es entfernen, wird es wie erwartet funktionieren.

tinymce.init({ 
 
    selector: 'h2.editable', 
 
    inline: true, 
 
    toolbar: 'undo redo', 
 
    menubar: false 
 
}); 
 

 
tinymce.init({ 
 
    selector: 'div.editable', 
 
    inline: true, 
 
    plugins: [ 
 
    'advlist autolink lists link image charmap print preview anchor', 
 
    'searchreplace visualblocks code fullscreen', 
 
    'insertdatetime media table contextmenu paste' 
 
    ], 
 
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
 
    content_css: [ 
 
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', 
 
    '//www.tinymce.com/css/codepen.min.css' 
 
    ] 
 
});

h2.mce-content-body { 
 
    font-size: 200%; 
 
    padding: 0 25px 0 25px; 
 
    margin: 10px 0 10px 0; 
 
} 
 

 
body { 
 
    background: transparent; 
 
} 
 

 
.content { 
 
    overflow: visible; 
 
    position: relative; 
 
    width: auto; 
 
    margin-left: 0; 
 
    min-height: auto; 
 
    padding: inherit; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="editable"> 
 
      <h2><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" style="float: right" />TinyMCE Inline Mode</h2> 
 
      <p> 
 
      This is an editable div element. 
 
      </p> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo. Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet 
 
      euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida. Sed semper ante sed dui consectetur eget commodo eros imperdiet. Mauris magna diam, scelerisque at ornare vel, dignissim ac sem. Fusce id congue 
 
      lacus. Duis sit amet tellus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus mattis facilisis pretium. In in nibh eu urna ornare semper. Sed imperdiet felis vitae nibh sagittis eu pulvinar 
 
      metus facilisis. Sed dolor orci, aliquet sagittis auctor id, faucibus at justo. 
 
      </p> 
 
      <p> 
 
      Vestibulum vestibulum velit nec magna lobortis elementum. Ut egestas ultrices tincidunt. Sed vestibulum mi vitae dui interdum eget rhoncus neque faucibus. Ut nec leo tellus. Nunc in metus sit amet purus bibendum dignissim pulvinar quis erat. Quisque vel 
 
      ultricies nisi. Vestibulum eu ante risus. In ultrices dignissim massa, vel luctus dui consequat quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
 
      </p> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div>