TinyMCE: Disable 'resizable' function for specific div?

空扰寡人 提交于 2020-01-02 20:18:09

问题


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');

回答1:


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})
    }
})



回答2:


Make resize impossible by CSS

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


来源:https://stackoverflow.com/questions/17243512/tinymce-disable-resizable-function-for-specific-div

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!