我可以在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
});
}