(CKEDITOR) Internet Explorer 删除调整大小处理程序

Question

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...

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.

Answer 1

IE doesn't show the boxes when the editable element is contained in a not editable element:

<div contenteditable="false">
    <div contenteditable="true">
       . . .
    </div>
</div>

The ckeditor content is edited in an HTML document. The contenteditable flag is set by ckeditor on the body tag of that document. It seems not possible to set a contenteditable=false attribute to its parent, the HTML tag.

My (jQuery) workaround is to set the iframe body contenteditable attribute to false, and wrap the body content in a div that has contenteditable=true. You will have to do that on every mode change, but the mode event is also thrown on instanceReady:

editor.on('mode', function (evt) {
   //-- in system mode return, editor has no document here
   if (!evt.editor.document) return false;

   //-- get the body of the document in the cdeditor iframe
   var $editorDocumentBody = $(evt.editor.document.getBody().$);

   //-- if ie hasLayout property, wrapper needed to avoid resize borders
   var documentStyle = $editorDocumentBody[0].currentStyle;
   if (typeof documentStyle.hasLayout != 'undefined' && documentStyle.hasLayout){

      //-- check if wrapper div already exists
      var $insertedElement = $editorDocumentBody.find('div[contenteditable="true"]');

      //-- if not, create wrapper, append body content to it, append to body
      if (!$insertedElement.length) {
         $insertedElement = $('<div/>', {
            contenteditable: 'true'
         }).append($editorDocumentBody.contents()).appendTo($editorDocumentBody);
      };

      //-- set the contenteditable attributes
      $editorDocumentBody.attr('contenteditable', 'false');
      $insertedElement.attr('contenteditable', 'true');
   };
}

You might need to allow elements with the contenteditable attribute. You can edit config.js and add something like this:

config.allowedContent = 
   'span p a img hr h6 h5 h4 h3 h2 h1 th td tr div;*[contenteditable]';

Please note that this workaround wraps a div around the user content, what might not be preferable. You can see the div with the contenteditable attribute in HTML mode.

Answer 2

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>

Answer 3

In my case, I had a problem removing the resize handler in IE11 in the Summernote WYSIWYG-editor. I also reviewed many topics on Stackoverflow . The reason was that I had the property width: 705px in the styles for paragraph p. When I removed this property, then the damn resize handler disappeared!