2016-03-29 3 views
0

Я пытаюсь использовать класс диалогового диалога jquery modal, найденный в http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/, и пока он работает отлично.Использование TinyMCE в модальном диалоговом окне

Единственная проблема, с которой я столкнулся, - это TinyMCE, я хотел бы использовать TinyMCE в форме. И я загрузил экземпляр TinyMCE успешно, но теперь, когда появляется другое окно из tinymce, например окна с изображениями или ссылками, я не могу редактировать текстовые поля во всплывающей форме.

Я проверил журнал консоли и не вижу конфликтов или ошибок. Может ли кто-нибудь помочь с возможными причинами?

TinyMCE Instance:

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

Модального Popup Instance

$("#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(); 
        }}]});   
    }); 

ответ

2

бутстрап модальный имеет код, который останавливает что-нибудь еще от получения фокуса, пока она включена (по дизайну). Вы должны быть в состоянии изменить это с кодом, как в следующем:

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

(Это предполагает, что вы не возражаете, используя JQuery, который уже в вашем примере кода)

Смежные вопросы