customizing wordpress wp_editor handles


you might have noticed that wordpress comes with a tinymce editor. the textarea editor allows you to enlarge or reduce the space downwards with a small handle on the bottom left. What if you want to enlarge it or reduce it upwards?

Let us create a new handle on the topright outside of the wordpress tinymce editor. Let’s say we have a div with id (my_resize) outside of the wp_editor.


jQuery(window).load(function () {
    // make my notes area draggable
    jQuery('#comment_resize').toggle();
    var isMouseDown = false;
    var old_y = 0;
    var new_y = 0;
    var maxheight = jQuery(window).height() * 0.8;
    var minheight = jQuery(window).height() * 0.1;
    var currentheight = 0;

    jQuery('#my_resize').mousedown(function(e) {
        currentheight = parseInt(jQuery("#comment_ifr").css('height'));
        e.preventDefault();
        isMouseDown = true;
        old_y = e.pageY;
    });
    jQuery(document).mousemove(function(e) {
        if (isMouseDown) {
            new_y = e.pageY;
            diff = old_y - new_y;
            ht = currentheight+diff;
            // set a max and min for the height
            ht = (ht > maxheight) ? maxheight : ht;
            ht = (ht < minheight) ? minheight : ht;
            jQuery("#comment_ifr").css('height', ht);
        }
    });
    jQuery(document).mouseup(function(e) {
        isMouseDown = false;
    });
});

suggested css:


#my_resize {
background: url("/wp-includes/js/tinymce/themes/advanced/img/icons.gif") repeat scroll -800px 0 transparent;
cursor: n-resize;
display: block;
float: right;
margin-right:-15px;
margin-top:-15px;
height: 20px;
width: 20px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Like it.? Share it:

Comments are closed.