Bootstrap modalen Dialog in ASP Update Panel verhindert Eingabefokus in tinyMCE Plugins

Question

Ich habe das gleiche Problem wie diese question, obwohl meine Umstände etwas anders sind, keine der angebotenen Lösungen funktionieren für mich.

Ich habe einen Bootstrap modalen Dialog in einem ASP Update-Panel mit einem tinyMCE Steuerelement, das abgesehen von modalen Popups von tinyMCE gut funktioniert - alle Eingabesteuerelemente sind nicht fokussierbar, klicken und Tabbing hat keine Wirkung.

Der allgemeine Konsens besteht darin, e.stopImmediatePropagation() zu verwenden, obwohl dies nichts in meinem Setup tut.

<asp:Panel ID="EditShowDetailsPanel" runat="server" CssClass="modal fade" TabIndex="-1" role="dialog" aria-labelledby="EditShowDetailsPanel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <asp:UpdatePanel ID="EditShowDetailsUpdatePanel" runat="server" UpdateMode="Conditional"> 
       <ContentTemplate> 
        <div class="modal-header"> 
         <h4 class="modal-title">Edit Show Details</h4> 
        </div> 
        <div class="modal-body"> 
         <div class="row"> 
          <div class="col-xs-12"> 
           <asp:TextBox ID="ShowInfoTextBox" TextMode="MultiLine" runat="server" ClientIDMode="Static" /> 
           .... 
          </div> 
         </div> 
        </div> 
        <div class="modal-footer"> 
         <asp:LinkButton ID="SaveEditShowDetailsLinkButton" runat="server" OnClientClick="mceSave();" OnClick="SaveEditShowDetailsLinkButton_Click" CssClass="btn btn-success">Save Changes</asp:LinkButton> 
         <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Cancel</button> 
        </div> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </div> 
</asp:Panel> 


<script type="text/javascript"> 

     function mceSave() { 
      //save contents to textbox 
      tinyMCE.triggerSave(); 
     } 

     function pageLoad() { 

      var prm = Sys.WebForms.PageRequestManager.getInstance(); 
      prm.add_beginRequest(BeginRequestHandler); 

      function BeginRequestHandler(sender, args) { 
       //remove mce editor 
       tinymce.execCommand('mceRemoveEditor', true, 'ShowInfoTextBox'); 
      } 

      //TinyMCE init 
      $(document).ready(function() { 
       tinymce.init({ 
        selector: "textarea#ShowInfoTextBox", 
        menubar: false, 
        theme: "modern", 
        height: 300, 
        plugins: [ 
         "link lists hr anchor media code" 
        ], 
        toolbar: "undo redo | bold italic underline | bullist numlist | link | media | code" 

       }); 
      }); 
} 
</script> 

Answer 1

Das Bootstrap-Modal verfügt über eine Funktion, die das Fokussieren von Elementen außerhalb des Modales verhindert. Dies kann im modalen Bootstrap-Code (the enforceFocus function) gesehen werden. Da die TinyMCE-Dialoge außerhalb des Bootstrap-Modals gerendert werden, erlaubt das Modal keine Fokussierung.

In Bootstrap 4 kann diese Funktionalität durch Einstellung focus: false in der modalen Konfiguration deaktiviert werden.

In Bootstrap 3 kann diese Funktionalität nicht unterdrückt werden. Hier sind zwei mögliche Abhilfen:

• Aufschalten der enforceFocus Funktion vor dem Bootstrap modal initialisiert wird, über

  $.fn.modal.Constructor.prototype.enforceFocus = $.noop; 
  

  Dadurch wird die Funktion für alle Modalverben danach deaktivieren wird.

• Entfernen Sie den Fokus-Ereignishandler, sobald das Dialogfeld initialisiert wurde.

  Dies wird die Funktionalität in den derzeit geöffneten Modalen deaktivieren, aber neu geöffnete Modale haben es immer noch.