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

2018-06-19 18:18:37

更新：在发布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;
}

如何重现：

在IE8中打开演示

单击现有段落，应该出现一个小的1px边框，并且您应该无法编辑文本。

再次单击该元素，现在会出现厚边框并可以编辑文本。

输入几个字符，然后点击提交按钮。更新不会与$_POST数据一起发送。如果要单击编辑器中的另一个区域，删除厚边框，数据将正常发送。

疑问/问题：

重要提示：如何让表单发布编辑后的文本而不需要用户提供解决方法？

更新：这似乎是从TinyMCE首席开发人员最近的一次提交中解决的。我仍然无法测试一个真正的IE8安装，但这工作和沉默了IETester的错误。

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

额外：我怎样才能防止这些句柄在编辑器之外延伸？

好吧，这是一个奇怪的IE8错误。我找到了一个解决方法，但仍然需要解决这个问题。

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

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

问题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标志

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

这里有一篇文章解释得非常好：除非你删除使它们出现的属性，否则你不能删除它们。 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会阻止调整大小。

链接地址: http://www.djcxy.com/p/55627.html

上一篇: TinyMCE issues with resizable content in IE8

下一篇: Data structure with O(1) insertion time and O(log m) lookup?