TinyMCE涉及IE8中可调整大小的内容

Question

更新:在TinyMCE论坛上发帖后(在提供赏金之前我应该​​做的事情)可能会解决主要问题,但我仍然对如何禁用可调整大小行为的其他问题持开放态度(数字2)和帖子结束时的3).

---

我在使用IE8(而非其他版本)中的TinyMCE保存内容时遇到问题.在IE中,编辑器中的某些元素在每个角落都有句柄和可拖动的"边框",当您专注于开始编辑时,可能会出现条纹边框:

问题:

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

我使用的是TinyMCE 3.4.6 jQuery包,我在其他浏览器中没有这种行为.

---

更新:

我已经相当多地缩小了问题的原因并找到了一些东西:

• 无论是否使用jQuery构建都会出现问题,并且不依赖于正在使用的tinymce插件.
• 当有一个(min-)高度/宽度应用于元素时,似乎只显示较粗的"边框",无论是内联还是外部CSS.

• 使用IETester,我收到的错误声称,'length' is null or not an object当活动元素的焦点丢失时; 即当您点击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. 重要提示:如何在不需要用户解决方法的情况下使表单发布已编辑的文本？

   更新:这似乎是在TinyMCE首席开发人员的最近提交中解决的.我仍然无法在真正的IE8安装上进行测试,但这可以解决IETester中的错误.

2. 不太重要:有没有办法完全防止或移除手柄和可拖动的边缘？我猜这是一个关注IE的实现contentEditable而不是TinyMCE的问题,甚至可能不是问题的原因.

3. 额外:如何防止这些句柄扩展到编辑器之外？

Answer 1

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

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

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