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.
Good code brings value. However, code by itself is a liability. Making code correct, reliable, maintainable and minimum is a creative and fun job. Among many programming languages used in the past 20 years, I like C# for its LINQ and async/await features. I like JavaScript for its functional root and being the only language for full stack web application development.
Friday, February 28, 2014
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)
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;
}
Subscribe to:
Posts (Atom)