Javascript IE8中具有可调整大小内容的TinyMCE问题

更新：在（我在提供赏金之前应该做的事情）之后，主要问题可能会得到解决，但对于如何禁用可调整大小行为的其他问题（文章末尾的2号和3号），我仍然非常开放

---

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

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

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

---

更新： 我已经将问题的原因缩小了很多，并发现了一些东西：

• 无论是否使用jQuery构建，问题都会出现，这并不取决于使用的是哪个tinymce插件
• 只有当元素应用了（最小）高度/宽度（内联声明或来自外部CSS）时，才会出现较厚的“边框”
• 使用，当活动元素的焦点丢失时，我得到了声称

  'length'为null或不是对象的错误；i、 e.单击TinyMCE编辑器外的任何位置时
  
  
  我没有在真正的IE8安装中看到这个错误（我目前无法访问），但是：考虑到上面提到的问题和解决方法，这在某种程度上是有意义的。我必须点击提交两次，并驳回警告，才能让表单在IETester中发布
  

• 这些边框和控制柄实际上会延伸到编辑器/iframe之外：

我创建了一个live，下面是它的内容：

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

$（函数（）{
$（'textarea.tinymce'）.tinymce({
脚本url:'tiny_mce/tiny_mce.js'，
content_css:'test.css'
});
});
p费用/p
提交
/*test.css的内容*/
p{
最小高度：24px；/*此行显示控制柄*/
背景色：#f00；
颜色：#fff；
}

如何复制：

在IE8中打开

单击现有段落，将显示一个小的1px边框，您将无法编辑文本

再次单击该元素，此时将显示粗边框，可以编辑文本

键入几个字符，然后单击提交按钮。更新将不会与

$\u POST

数据一起发送。如果要单击编辑器中的另一个区域，删除厚边框，数据将正常发送

---

问题/议题：

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

更新：这似乎在TinyMCE首席开发人员的帮助下得到了解决。我仍然无法在真正的IE8安装上进行测试，但这起到了作用，并且消除了IETester中的错误

不太重要：有没有办法完全防止或移除把手和可拖动边缘？我猜这是IE实现

contentEditable

的一个问题，而不是太小的问题，甚至可能不是问题的原因

Extra：如何防止这些句柄扩展到编辑器之外

---

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

我发现在提交表单之前，您可以将textarea的内容设置为textarea的内容。。。听起来很奇怪，但是调用

.html（）

会触发一个tinymce事件，返回正确的html

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

---

如果你给它一个布局，它应该工作。尝试缩放：1

问题2是由于contentEditable的IE实现，这是他们连接站点上的一张票据，请求修复它（需要登录）

---

我不知道问题3有什么解决方案，除了等待新的IE。在windows8下的最新IE10中，他们声称它是固定的（需要登录），但他们的解决方案是始终隐藏大小调整手柄。嗯，有一个解决方案，就是避免在编辑时使用任何样式，强制IE使用内部hasLayout标志。显然，您无法解决第二个问题

这里有一篇文章对此做了很好的解释：除非删除使它们出现的属性，否则不能删除它们。 （搜索“删除”一词）

通过在容器（contenteditable元素）上使用此选项，您仍然可以做一些改进：

（您的元素不必是div） onmousedown只允许您单击一次以进入可写入的状态。

---

onresizestart将阻止重新调整大小。

你应该在tinymce论坛上问这个问题：@Thariama:你是我希望能得到答案的人之一：）在使用SO之后，很难回到论坛，但我会尝试一下。我已经有一些“风滚草”的帖子了。不幸的是，我记不起与你在这里报道的问题类似的帖子/帖子的位置-我相信有一个解决方案（我认为它在tinymce论坛的某个地方）。我们主要使用FF，所以IE不是我的专长。要得到一个有用的答案可能很快就会发生，但有时很难找到一个困难问题的答案。至少在IETester中，这似乎没有什么区别（仍然无法在真正的IE8上进行测试）。在TinyMCE论坛上重新发布后，开发团队发布了一个小的更新，可能会解决这个问题，我今天早上一有机会就要测试。我的错误，这看起来确实有效（我在测试中出错），但仍然在IETester中抛出了一个错误（必须提交两次）。似乎也很管用，希望我的手能弄到一个真正的IE8

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