TinyMCE IE8 中可调整内容的问题

Question

更新：在posting on the TinyMCE forum（在提供赏金之前我应该​​做的事情）之后，主要问题可能会得到解决，但我仍然非常愿意接受关于如何处理的其他问题禁用可调整大小的行为（帖子末尾的数字 2 和 3）。

---

我在 IE8（不是其他版本）中使用 TinyMCE 保存内容时遇到问题。在 IE 中，编辑器中的某些元素在每个角落都有手柄和可拖动的“边框”，当您专注于开始编辑时，可能会出现条纹边框：

问题：

如果我在粗边框仍然可见时提交表单（图像中的状态 3），表单将不会保存内容。我必须单击编辑器的另一个区域以使所有边框消失，然后然后提交表单。

我正在使用 TinyMCE 3.4.6 jQuery 包，我在其他浏览器中没有这种行为。

---

更新：

我已经把问题的原因缩小了很多，发现了一些事情：

• 无论是否使用 jQuery 构建都会出现此问题，并且与使用的 tinymce 插件无关。
• 似乎只有在元素应用了（最小）高度/宽度（声明为内联或来自外部 CSS）时，才会出现较粗的“边框”。

• 使用IETester，当来自活动元素的焦点丢失时，我收到声称'length' is null or not an object 的错误；即当您单击 TinyMCE 编辑器之外的任意位置时。

  我在真正的 IE8 安装中没有看到这个错误（我目前无法访问），但是：考虑到上述问题和解决方法，这在一定程度上是有道理的。我必须点击提交两次并关闭警告才能让表单在 IETester 中发布。

• 这些边框和句柄实际上会延伸到编辑器/iframe 的外部：

我创建了一个直播bare-bones demo，下面是它的内容：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
    $(function() {
        $('textarea.tinymce').tinymce({
            script_url : 'tiny_mce/tiny_mce.js',
            content_css : 'test.css'
        });
    });
</script>

<form action="" method="post">
<textarea class="tinymce" name="content">&lt;p&gt;Testing&lt;/p&gt;</textarea>
<button type="submit">Submit</button>
</form>

/* Content of test.css */
p {
    min-height: 24px; /* this line makes the handles appear */
    background-color: #f00;
    color: #fff;
}

如何重现：

1. 在IE8中打开demo
2. 点击现有段落，应该会出现一个 1px 的小边框，您应该无法编辑文本。
3. 再次单击该元素，现在出现粗边框，可以编辑文本。
4. 输入几个字符，然后单击提交按钮。更新不会与$_POST 数据一起发送。如果您点击编辑器内的另一个区域，去掉粗边框，数据会正常发送。

---

问题/问题：

1. 重要提示：如何在不需要用户解决方法的情况下让表单发布编辑后的文本？

   更新： 这似乎已在 TinyMCE 首席开发人员的 recent commit 中得到解决。我仍然无法在真正的 IE8 安装上进行测试，但这有效并消除了 IETester 中的错误。

2. 不太重要：有什么方法可以完全防止或移除手柄和可拖动边缘？我猜这是 IE 的 contentEditable 实现的问题，而不是 TinyMCE，甚至可能不是问题的原因。

3. 额外：如何防止这些句柄延伸到编辑器之外？

Answer 1

问题 2 是由于 IE 实现 contentEditable，这是他们连接站点上的一张票，要求修复它https://connect.microsoft.com/IE/feedback/details/576043/paragraphs-with-haslayout-behave-like-a-block-inside-contenteditable（需要登录）

除了等待新的 IE 之外，我不知道问题 3 的任何解决方案。在 windows8 下的最新 IE10 中，他们声称它已修复 https://connect.microsoft.com/IE/feedback/details/576040/resizing-handles-in-contenteditable-elements-are-placed-over-any-other-element（需要登录），但他们的解决方案是始终隐藏调整大小的句柄。好吧，有一个解决方案，它是避免在编辑时使用任何强制 IE 内部 hasLayout 标志的样式

Answer 2

好吧，这是一个奇怪的 IE8 错误。我找到了解决方法，但 tinymce 团队仍应解决此问题。

我发现在提交表单之前，您可以将 textarea 的内容设置为 textarea 的内容...听起来很奇怪，但调用 .html() 会触发一个返回正确 html 的 tinymce 事件。

$("button").click(function() { 
    $("textarea").html($("textarea").html());
});

Answer 3

显然你无法解决第二个问题。

这里有一篇文章很好地解释了它：除非您删除使它们出现的属性，否则您无法删除它们。 http://www.satzansatz.de/cssd/onhavinglayout.html （搜索“删除”这个词）

您仍然可以通过在容器（具有 contenteditable 的元素）上使用它来改进一点：

function fixIE( editableContainer ) {
    editableContainer.onmousedown = function ( e ) {
        e = e || event;
        ( e.target || e.srcElement ).focus( );
    };
    editableContainer.onresizestart = function ( e ) {
        e = e || event;
        if ( e.stopPropagation ) {
            e.stopPropagation( );
        }
        e.cancelBubble = true;
        if ( e.preventDefault ) {
            e.preventDefault( );
        }
        e.returnValue = false;
        return false;
    };
}

（您的元素不必是 div） onmousedown 将只允许您单击一次以进入可以写入的状态。 onresizestart 将阻止调整大小。

Answer 4

如果你给它 hasLayout，它应该可以工作。尝试缩放：1；