Question

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

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

enter image description here

问题：

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

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

更新

我已经将问题的原因缩小了很多，并找到了一些东西：

无论是否使用jQuery构建，都会出现问题，并且不依赖于正在使用的tinymce插件。
当有一个（min-）高度/宽度应用于元素时，似乎只显示较粗的“边框”，无论是内联还是外部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;
}

如何重现：

在IE8中打开demo
点击现有段落，应显示一个小的1px边框，您应该无法编辑文字。
再次单击该元素，现在出现粗边框并且可以编辑文本。
键入几个字符，然后单击“提交”按钮。更新不会与$_POST数据一起发送。如果您要单击编辑器中的其他区域，删除粗边框，则将正常发送。

问题/问题：

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

更新：这似乎是在TinyMCE首席开发人员的recent commit中解决的。我仍然无法在真正的IE8安装上进行测试，但这有效并且使IETester中的错误无效。
不太重要：有没有办法完全阻止或移除手柄和可拖动的边缘？我猜这是关于IE实现contentEditable而不是TinyMCE的问题，甚至可能不是导致问题的原因。
额外：如何防止这些句柄扩展到编辑器之外？

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错误。我找到了一个解决方法，但仍然需要解决这个问题。

我发现在提交表单之前你可以将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;

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

问题：

更新

如何重现：

问题/问题：

4 个答案: