在 Bootbox 模式对话框中使用 Tiny MCE 编辑器

Question

我可以在 Bootstrap 模式中使用 Tiny MCE 编辑器，但我无法弄清楚如何在 BootBox 中使用此编辑器> 模态。

下面的 JSFiddle 给出了一个工作的 Bootstrap 模态和一个非工作的 BootBox 模态的简单示例：JSFiddle

任何帮助/指针将不胜感激。

HTML 代码：

<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch bootstrap modal (works)</a>
<a class="btn btn-primary btn-large" onclick="bb()">Launch bootbox modal (not working properly)</a>

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
             <a class="close" data-dismiss="modal">×</a>
             <h3>Bootstrap modal</h3>
         </div>
         <div class="modal-body">
             <h4>Text in a modal</h4>
             <textarea name="content"><p>Some content in a Tiny MCE editor, lovely.</p></textarea>
         </div>
         <div class="modal-footer">
             <a href="#" class="btn btn-success">Call to action</a>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
         </div>
        </div>
    </div>
</div>

JavaScript 代码：

$(document).ready(function() {

    tinymce.init({
        selector: "textarea",
        width:      '100%',
        height:     270,
        plugins:    [ "anchor link" ],
        statusbar:  false,
        menubar:    false,
        toolbar:    "link anchor | alignleft aligncenter alignright alignjustify",
        rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
    });
});

window.bb = function () {
    console.log('bb');
    var d = bootbox.dialog({
      message: "<p>The textarea below should appear as a tinyMCE editor, but it doesn't.</p><textarea id=\"sandro\" class=\"sandro\" name=\"content\">",
      title: "Bootbox modal",
      buttons: {
        cancelButton: {
          label:     "Close",
          className: "btn-danger",
        },
        okButton: {
          label:     "Ok",
          className: "btn-success",
        }
      }
    });
    d.on("shown.bs.modal", function() {
        console.log('bootbox modal is now visible');
        tinymce.execCommand('mceAddControl',false,'sandro'); // doesn't appear to have any effect
    });
}

Answer 1

打开对话框后必须初始化tinymcs。

$(function(){
$("#btn-dialog").on("click", function(){
var dialog = bootbox.dialog({
  title: 'Select',
  message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>',
  size: 'large',
  buttons: {
    cancel: {
      label: 'Cancel',
      className: 'btn-danger',
      callback: function() {
        return true
      }
    },
    select: {
      label: 'Save',
      className: 'btn-success',
      callback: function() {
       return true
      }
    }
  }
});

dialog.on("hidden.bs.modal", function() {
  console.log("hidden.bs.modal");
 tinymce.editors = [];
});

dialog.init(function() {
  var promise;
  $(document).on('focusin', function(e) {
    console.log("focusin", e);
    console.log($(e.target).closest(".mce-window").length);
    if (($(e.target).closest(".mce-window").length)) {
      return e.stopImmediatePropagation();
    }
  });

  promise = $.get("form.html");
  promise.done(function(data) {
     dialog.find('.bootbox-body').html(data);
  });
});

}
);
});

您可以使用此链接来实现您的想法。 http://embed.plnkr.co/6QCok7akLU0rJtjOc2Eg/