TinyMCE: Disable 'resizable' function for specific div?

1
votes

I have a plugin in Wordpress that uses jQuery Resizable to resize dialogs in TinyMCE. There's one <div> in particular (shown below) that I don't want to be resizable. How do I accomplish this?

This is the outputted <div> I don't want resizable: 

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all wp-dialog ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">

This is the resizable handle's output: 

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"></div>

I tried these two jQuery functions and neither worked:

$('.ui-dialog').resizable('destroy');
$('.ui-resizable-handle').resizable('destroy');
2
jquerywordpressresizetinymcejquery-ui-resizable
you are using which browser? - Thariama

2 Answers

4
votes

add an onMouseDown handler to check for your DIV via CLASS. if the correct DIV is being clicked, you will need to address the BODY element of the editor.

This took me for ever to find! enjoy

ed.onMouseDown.add(function(ed, e){ 
    var body = ed.getBody();
    if(jQuery(e.target).hasClass('someclass')){
        jQuery(body).attr({'contenteditable': false})
    }else{
        jQuery(body).attr({'contenteditable': true})
    }
})
0
votes

Make resize impossible by CSS

.defaultSkin .mceStatusbar a.mceResize {
display: none;
}