Question

我遇到的问题是，在网络浏览器中，编辑器中的每个div都显示了一个调整大小的框。这个框没有显示为Mozilla Firefox。如何删除此调整大小框/调整大小处理程序并将元素直接集中在键入或选择它？

其实我需要这个：http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-disableObjectResizing但它也需要移除这个怪异的盒子。如果没有删除我需要点击两次并且Ckeditor右键菜单失败...

Resize box?

PArtial solution

此网址提供了部分回复 http://chris.photobooks.com/tests/rte/IE_resizing/IE_resizing.html

这不是来自CKEDITOR，而是来自html5 / javascript / ie 这是一个临时修复，右键菜单再次正常工作。

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

测试/重现错误/问题：

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

注意：您需要单击div元素才能看到该框。

Answer 1

当可编辑元素包含在不可编辑的元素中时，IE不会显示这些框：

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

ckeditor内容在HTML文档中编辑。 contenteditable标志由ckeditor在该文档的body标签上设置。似乎无法为其父标记HTML标记设置contenteditable = false属性。

我的（jQuery）解决方法是将iframe body contenteditable属性设置为false，并将body内容包装在具有contenteditable = true的div中。您必须在每次模式更改时执行此操作，但modeReady上也会抛出mode事件：

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

您可能需要允许具有contenteditable属性的元素。您可以编辑config.js并添加如下内容：

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

请注意，此解决方法会围绕用户内容包装div，这可能不是更好的选择。您可以在HTML模式下看到具有contenteditable属性的div。

Answer 2

看起来IE会自动在具有已定义尺寸的可编辑元素上添加调整大小手柄。如果你摆脱了最小高度，把手就会消失。

<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

就我而言，我在删除Summernote所见即所得编辑器中IE11中的调整大小处理程序时遇到问题。我还回顾了有关 Stackoverflow 的许多主题。原因是我在p段的样式中具有属性 width：705px 。当我删除此属性后，该死的调整大小处理程序消失了！

（CKEDITOR）Internet Explorer删除调整大小处理程序

PArtial solution

3 个答案: