TinyMCE 与 IE8 中可调整大小的内容有关的问题

Question

更新： 在 TinyMCE 论坛上发帖之后< /a> （在提供赏金之前我应该​​做的事情）主要问题可能会得到解决，但我仍然对有关如何禁用可调整大小的行为的其他问题持非常开放的态度（数字2 和 3 位于帖子末尾）。

---

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

问题：

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

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

---

更新：

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

• 无论有没有 jQuery 构建，问题都会发生，并且不取决于正在使用的tinymce 插件。
• 较粗的“边框”似乎仅在元素应用了（最小）高度/宽度（无论是声明为内联还是来自外部 CSS）时才会出现。

• 使用 IETester，我收到了声称 ' 的错误当活动元素失去焦点时，length' 为 null 或不是对象；即当您单击 TinyMCE 编辑器之外的任意位置时。

  

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

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

我创建了一个实时 简单的演示，其内容如下：

<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 中的演示
2. 单击现有段落，应该会出现一个 1px 的小边框，并且您应该无法编辑文本。
3. 再次单击该元素，现在会出现粗边框并且可以编辑文本。
4. 输入几个字符，然后单击提交按钮。更新不会与 $_POST 数据一起发送。如果您单击编辑器内的另一个区域，删除粗边框，数据将正常发送。

---

疑问/问题：

1. 重要：如何让表单发布编辑后的文本而不需要用户采取解决方法？

   更新：这似乎在最近提交中得到解决< /a> 来自 TinyMCE 首席开发人员。我仍然无法在真正的 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（需要登录）

我不知道问题3有什么解决办法，除了等待新的IE。在 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 团队仍然应该解决这个问题。

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

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

Answer 3

显然没有办法解决第二个问题。

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

您仍然可以通过在容器（具有 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；