Resizable WYMEditor with jQuery UI Resizable
I took pyjax’s WYMEditor resizable plugin and turned it into something that works for me using jQuery UI 1.6.
To use this, include jQuery, jQuery UI core and resizable, WYMEditor, then this. In that order.
WYMeditor.editor.prototype.resizable = function(options) {
var wym = this;
// Define some default options
var default_options = {
start: function(e, ui) {
jQuery(wym.box).data("wym_height",
jQuery(wym.box).find("iframe").height());
},
stop: function(e, ui) {
jQuery(wym.box).data("wym_height",
jQuery(wym.box).find("iframe").height());
},
// resize is called by the jQuery resizable plugin whenever the
// client area was resized.
resize: function(e, ui) {
var diff = ui.size.height – ui.originalSize.height;
jQuery(wym.box).find("iframe").height(
jQuery(wym._box).data("wymheight") + diff);
// If the plugin has horizontal resizing disabled we need to
// adjust the"width"attribute of the area css, because the
// resizing will set a fixed width (which breaks liquid layout
// of the wymeditor area).
if( !ui.options.handles[‘w’]&&!ui.options.handles[‘e’] ) {
ui.size.width ="inherit";
}
},
handles:"s,e,se", minHeight: 250, maxHeight: 600
};
// Merge given options with default options. Given options override
// default ones.
var finaloptions = jQuery.extend(defaultoptions, options);
jQuery(wym.box).resizable(finaloptions);
};
From this point, you can use a resizable WYMEditor by adding this to your postInit setting when you create a WYMEditor on the page.
wymeditor({
postInit: function(wym) {
wym.hovertools();
// other
pluginswym.resizable({
handles:s,e, maxHeight: 600
});
}
})Go ahead and view the demo.
4 comments
Hey Marc.
I trying to making some div Resizable with jQuery, that works great, but I just want to make the height resizable, do you have any idea of how to make this to work?
I’ve read the documentation on jqueryui.com, but dont think there is something like.
Thanks and nice post.
1.how to get content(what you write in text editor area) from text editor, save and edit it..then show what you have done and convert it to pdf file and also print it…really need the solution…
2. how to retrieve data from database in show it to this text editor.
thanks…
veremos .. creo que no es compatible con chrome
hola, no logro hacer funcionar el jemplo como lo hago correr ?