Verwenden von TinyMCE in einem Modal-Dialog

Question

Ich versuche, eine jquery modale Dialogklasse zu verwenden, die bei http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/ gefunden wird und bis jetzt funktioniert es tadellos.

Das einzige Problem, das ich habe, ist mit TinyMCE, ich möchte TinyMCE in der Form verwenden. Und ich habe die TinyMCE-Instanz erfolgreich geladen, aber jetzt, wo immer ein anderes Fenster von ynymce auftaucht, wie das Fenster zum Erstellen von Bildern oder Links, kann ich die Textfelder im Popup-Formular nicht bearbeiten.

Ich überprüfte das Konsolenprotokoll und sehe keine Konflikte oder Fehler. Kann jemand mit was mögliche Ursachen assistieren?

TinyMCE Instanz:

<script> 
    tinymce.init({ 
      selector: 'textarea', 
      relative_urls: false, 
      remove_script_host: false, 
      document_base_url: "https://mysite.co.za/", 
      height: "360", 
      fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt", 
      font_formats: "Andale Mono=andale mono,times;" + 
        "Arial=arial,helvetica,sans-serif;" + 
        "Arial Black=arial black,avant garde;" + 
        "Book Antiqua=book antiqua,palatino;" + 
        "Comic Sans MS=comic sans ms,sans-serif;" + 
        "Courier New=courier new,courier;" + 
        "Georgia=georgia,palatino;" + 
        "Helvetica=helvetica;" + 
        "Impact=impact,chicago;" + 
        "Symbol=symbol;" + 
        "Tahoma=tahoma,arial,helvetica,sans-serif;" + 
        "Terminal=terminal,monaco;" + 
        "Times New Roman=times new roman,times;" + 
        "Trebuchet MS=trebuchet ms,geneva;" + 
        "Verdana=verdana,geneva;" + 
        "Webdings=webdings;" + 
        "Wingdings=wingdings,zapf dingbats", 
      plugins: "image,advlist, table, autolink, charmap, code, colorpicker, contextmenu,link, lists, paste, preview, searchreplace, spellchecker, textcolor, wordcount,emoticons", 
      toolbar: "fontselect | fontsizeselect | forecolor | backcolor | bold | italic | underline | alignleft | aligncenter | alignright | alignjustify | bullist | numlist | outdent | indent | link | image | print | media | code", 
      tools: "inserttable", 
      contextmenu: "link image inserttable | cell row column deletetable" 
     }); 
</script> 

Modal Popup Instanz

$("#new").click(function() { 
     BootstrapDialog.show({ 
      title: 'Document', 
      message: $('<div></div>').load('https://mysite.co.za/modals/document_editor.php'), 
      buttons: [{ 
        icon: 'glyphicon glyphicon-send', 
        label: 'Submit', 
        cssClass: 'btn-primary', 
        autospin: false, 
        action: function (dialogRef) { 
          $("#form").submit(); 
          dialogRef.enableButtons(false); 
          dialogRef.setClosable(false); 
          dialogRef.getModalBody().html('<strong>Saving...</strong>'); 
        }}, {label: 'Close', action: function (dialogRef) { 
         dialogRef.close(); 
        }}]});   
    }); 

Answer 1

Der Bootstrap modal hat Code, der etwas anderes aus immer Fokus anhält, während es (durch Design) aktiviert ist. Sie sollten diese wie die folgenden mit dem Code zu überschreiben in der Lage:

$('#myModal').on('shown.bs.modal', function() { 
    $(document).off('focusin.modal'); 
}); 

(Dies setzt voraus, Sie sind nichts dagegen jQuery nicht verwenden, die in Ihrem Codebeispiel ist bereits)