Javascript 在引导框模式对话框中使用微型MCE编辑器

我能够在引导模式中使用微型MCE编辑器，但我无法确定如何在引导盒模式中使用此编辑器

以下JSFIDLE给出了一个工作引导模式和非工作引导模式的简单示例：

如有任何帮助/建议，将不胜感激

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
    });
}

$（文档）.ready（函数（）{
tinymce.init({
选择器：“文本区域”，
宽度：“100%”，
身高：270，
插件：[“锚定链接”]，
状态栏：false，
梅努巴：错，
工具栏：“链接定位|左对齐中心对齐右对齐对齐对齐”，
相关列表：[{title:'Lightbox'，value:'Lightbox'}]
});
});
window.bb=函数（）{
console.log（'bb'）；
var d=bootbox.dialog({
消息：“下面的文本区域应显示为tinyMCE编辑器，但它不是。”，
标题：“引导盒模式”，
按钮：{
取消按钮：{
标签：“关闭”，
类名：“btn危险”，
},
OK按钮：{
标签：“Ok”，
类名：“btn成功”，
}
}
});
d、 打开（“show.bs.modal”，函数（）{
log（'bootbox模式现在可见'）；
tinymce.execCommand（'mceAddControl'，false，'sandro'）；//似乎没有任何效果
});
}

打开对话框后必须初始化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);
  });
});

}
);
});

$（函数（）{
$（“#btn对话框”）。在（“单击”，函数（）{
var dialog=bootbox.dialog({
标题：“选择”，
消息：“正在加载…
”，
尺寸：'大'，
按钮：{
取消：{
标签：“取消”，
类名：“btn危险”，
回调：函数（）{
返回真值
}
},
选择：{
标签：“保存”，
类名：“btn成功”，
回调：函数（）{
返回真值
}
}
}
});
dialog.on（“hidden.bs.modal”，function（））{
console.log（“hidden.bs.modal”）；
tinymce.editors=[]；
});
dialog.init（函数（）{
var承诺；
$（文档）.on（'focusin'，函数（e）{
console.log（“focusin”，e）；
log（$（e.target）.closest（“.mce window”）.length）；
if（（$（e.target）.closest（“.mce window”）.length））{
返回e.停止立即复制（）；
}
});
promise=$.get（“form.html”）；
承诺完成（功能（数据）{
dialog.find（'.bootbox body'）.html（数据）；
});
});
}
);
});

您可以使用此链接来实现您的想法。

---

请注意，在更高版本中，您可能需要在.mcs窗口TineMCE集成指南上使用.tox textfield：