Resizable WYMEditor with jQuery UI Resizable: jQuery UI

Email Linked In RSS Feed

Resizable WYMEditor with jQuery UI Resizable

Category: JavaScript & jQuery Tags: jQuery UI | Written on Jan 14, 2009

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.

JavaScript:
  1. WYMeditor.editor.prototype.resizable = function(options) {
    2. 

  2.     var wym = this;
    3. 

  3.     // Define some default options
    4. 

  4.     var default_options = {
    5. 

  5.             start: function(e, ui) {
    6. 

  6.                 jQuery(wym._box).data("wym_height",
    7. 

  7.                     jQuery(wym._box).find("iframe").height()
    8. 

  8.                 );
    9. 

  9.             },
    10. 

  10.             stop: function(e, ui) {
    11. 

  11.                 jQuery(wym._box).data("wym_height",
    12. 

  12.                     jQuery(wym._box).find("iframe").height()
    13. 

  13.                 );
    14. 

  14.             },
    15. 

  15.             // resize is called by the jQuery resizable plugin whenever the
    16. 

  16.             // client area was resized.
    17. 

  17.             resize: function(e, ui) {
    18. 

  18.                 var diff = ui.size.height - ui.originalSize.height;
    19. 

  19.                 jQuery(wym._box).find("iframe").height(jQuery(wym._box).data("wym_height") + diff);
    20. 

  20.                 // If the plugin has horizontal resizing disabled we need to
    21. 

  21.                 // adjust the "width" attribute of the area css, because the
    22. 

  22.                 // resizing will set a fixed width (which breaks liquid layout
    23. 

  23.                 // of the wymeditor area).
    24. 

  24.                 if( !ui.options.handles['w'] && !ui.options.handles['e'] ) {
    25. 

  25.                     ui.size.width = "inherit";
    26. 

  26.                 }
    27. 

  27.             },
    28. 

  28.             handles: "s,e,se",
    29. 

  29.             minHeight: 250,
    30. 

  30.             maxHeight: 600
    31. 

  31.         };
    32. 

  32.  
    33. 

  33.     // Merge given options with default options. Given options override
    34. 

  34.     // default ones.
    35. 

  35.     var final_options = jQuery.extend(default_options, options);
    36. 

  36.  
    37. 

  37.     jQuery(wym._box).resizable(final_options);
    38. 

  38.  
    39. 

  39. };

From this point, you can use a resizable WYMEditor by adding this to your postInit setting when you create a WYMEditor on the page.

JavaScript:
  1. wymeditor({postInit: function(wym) {
    2. 

  2.         wym.hovertools(); // other plugins…
    3. 

  3.         wym.resizable({handles: “s,e”,
    4. 

  4.         maxHeight: 600});
    5. 

  5.     }
    6. 

  6. })

Go ahead and view the demo.

Comments

#1. Juan http://domain.com on Nov 13, 2009
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.

Leave a Comment

Other Reading - Categories