Using a Tiny MCE editor in a Bootbox modal dialog

Question

I am able to use a Tiny MCE editor in a Bootstrap modal, but I cannot work out how to utilise this editor in a BootBox modal.

The following JSFiddle gives a simple example of a working Bootstrap modal and a non-working BootBox modal: JSFiddle

Any help/pointers would be appreciated.

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

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

score 0 · Answer 1 · answered Dec 20 '18 at 13:25

you must init tinymcs after opening dialog box.

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

}
);
});

you can use this link to implement your idea. http://embed.plnkr.co/6QCok7akLU0rJtjOc2Eg/

Please note in later versions you may need to use .tox-textfield instead on .mcs-window https://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable — apc, May 25 '21 at 15:12
TineMCE Integration guide: https://www.tiny.cloud/docs/integrations/bootstrap/ — apc, May 25 '21 at 15:18

Using a Tiny MCE editor in a Bootbox modal dialog

1 Answers1