Friday, February 28, 2014

tinymce editor in dynamical content inside bootstrap modal dialog

I need to use tinymce (http://www.tinymce.com/) editor in dynamically crated content inside bootstrap modal dialogue. The official document doesn't help and my online search found few tips. After a few tries, following are key steps to use tinymce in dynamic content:

First, we need to make the focus in event work properly inside bootstrap dialog  (http://www.tinymce.com/wiki.php/Tutorials:TinyMCE_in_a_boostrap_dialog)

// Prevent bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

Second, after the modal dialog statement, initialize tinymce.

$('#myDialogElement').modal();
$('#myTextArea').tinymce( { width: '100%', menubar: false});

Third, remove the tinymce editor when the modal dialog closes, as the first step, this is called in jQuery initialization.

$('#myDialogElement')on('hidden.bs.modal', function (e) {
        // need to remove the editor to make it work the next time
        tinymce.remove();
});

In the above code, we NuGet the jQuery version tinymce. Both jquery.tinymce.min.js and tinymce.js are included in the Web page.

Monday, February 24, 2014

A fluid responsive grid layout in Bootstrap 3

Unlike Boostrap 2, Bootstrap 3 doesn't have a .container-fluid mixin to make a fluid container. The .container is a fixed width responsive grid layout. In a large screen, there are excessive white spaces in both sides of one's Web page content.

A fluid grid layout uses all screen width and works better in large screen. It turns out that it is easy to create a fluid grid layout using Bootstrap 3 mixins. The following line makes a fluid responsive grid layout:

.container-fixed;

The .container-fixed mixin sets the content to the center of the screen and add paddings. It doesn't specifies a fixed page width.

Another approach is to use Eric Flowers' CSS style (http://www.helloerik.com/bootstrap-3-grid-introduction)

.my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}