Okno dialogowe modemu Bootstrap w panelu aktualizacji ASP zapobiega wprowadzaniu fokusu w wtyczkach tinyMCE.

Question

Mam taki sam problem jak ten question, chociaż moje okoliczności są nieco inne, żadne z podanych rozwiązań nie działa.

Mam modalne okno dialogowe ładowania początkowego wewnątrz panelu aktualizacji ASP z kontrolką tinyMCE, która działa dobrze niezależnie od modalnych wyskakujących okienek z tinyMCE - wszystkie kontrolki wprowadzania nie są w stanie ustawić ostrości, klikanie i tabulacja nie ma żadnego efektu.

Ogólna zgoda to użycie e.stopImmediatePropagation(), chociaż to nie robi nic w mojej konfiguracji.

<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

Modem Bootstrap posiada funkcję, która zapobiega ustawianiu ostrości dowolnych elementów poza samym modalem. Można to zobaczyć w kodzie modalnym Bootstrap (the enforceFocus function). Ponieważ dialogi TinyMCE są renderowane poza modem ładowania początkowego, modalny nie pozwala na ich skupienie.

W Bootstrap 4, tę funkcję można wyłączyć, ustawiając focus: false w konfiguracji modalnej.

W Bootstrap 3, tej funkcji nie można wyłączyć. Oto dwa możliwe obejścia:

• przesłonić funkcję enforceFocus przed Bootstrap modalnym jest inicjowany, przez

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

  Spowoduje to wyłączenie funkcji dla wszystkich czasowniki modalne później.

• Po uruchomieniu okna dialogowego należy usunąć funkcję obsługi zdarzeń fokusa.

  $(document).off('focusin.bs.modal'); 
  

  Spowoduje to wyłączenie funkcji w aktualnie otwieranych modach, ale nowo otwarte będą nadal je mieć.