Search code examples
javascriptinternet-explorerresizeckeditor

(CKEDITOR) Internet Explorer remove resize handler


I have the problem that on internet explorer for each div in the editor a resize box is shown.. This box isn´t shown for Mozilla Firefox. How can i remove this resize box/resize handler and focus the element directly on typing or selecting it?

Actually i need this: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-disableObjectResizing but it also needs to remove the weird box. If it isn't remove i need to click twice and the Ckeditor right click menu fails...

Resize box?

PArtial solution

This url provided a partial anwser http://chris.photobooks.com/tests/rte/IE_resizing/IE_resizing.html

It is not something from CKEDITOR but from html5/javascript/ie This is a temp fix for the right click menu to work ok, again.

    $("iframe")[0].contentDocument.attachEvent( 'oncontrolselect', function( event )
    {
            event.srcElement.focus();
            return false;
    }); 

To Test/reproduce the bug/problem:

<script src="http://ckeditor.com/apps/ckeditor/4.0.1/ckeditor.js"></script> 
<div id="testEditor">test text<div style="min-height:200px;"> test div</div></div> 
<script>CKEDITOR.replace("testEditor");</script>

Note: You need to click the div element to see the box.


Solution

  • It looks like IE automatically adds resize handles on editable elements with defined dimensions. If you get rid of the min-height, the handles will go away.

    <div contenteditable="true">
        <!-- IE9 displays resize handles around this div because
             its height is defined. -->
        <div style="height: 100px">test</div>
    </div>
    
    <div contenteditable="true">
        <!-- No resize handles here because size is auto. -->
        <div>test</div>
    </div>
    
    <div>
        <!-- Obviously no handles here either because content is
             not editable. -->
        <div style="height: 100px">test</div>
    </div>