9

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

实际上我需要这个：http ://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-disableObjectResizing但它还需要删除奇怪的框。如果它没有被删除，我需要单击两次并且 Ckeditor 右键单击​​菜单失败......

调整盒子大小？

部分解决方案

此网址提供了部分答案 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 元素才能看到该框。

4

3 回答 3

0

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

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

ckeditor 内容在 HTML 文档中进行编辑。contenteditable 标志由 ckeditor 在该文档的主体标签上设置。似乎不可能将 contenteditable=false 属性设置为其父级 HTML 标记。

我的（jQuery）解决方法是将 iframe 正文 contenteditable 属性设置为 false，并将正文内容包装在具有 contenteditable=true 的 div 中。您必须在每次模式更改时都这样做，但模式事件也会在 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');
   };
}

您可能需要允许具有 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。

于 2016-03-18T10:14:45.073 回答
-1

看起来 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>
于 2013-05-03T08:33:17.403 回答
-1

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

于 2019-12-04T09:14:45.563 回答