我可以在 Bootstrap 模式中使用Tiny MCE编辑器,但我无法计算如何在 BootBox中使用此编辑器莫代尔。
以下JSFiddle提供了一个工作Bootstrap模式和一个不工作的BootBox模式的简单示例:JSFiddle
任何帮助/指示都将不胜感激。
HTML code:
<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
});
}
答案 0 :(得分:0)
您必须在打开对话框后初始化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/