Question

我被迫在我们的网站上发布的CMS上使用WYSIWYG编辑器，并且空格的默认行为是空白<p></p>标签（这是预期的）。

FCKeditor.prototype.Version         = '2.6' ;
FCKeditor.prototype.VersionBuild    = '18638' ;

这没关系，但最大的问题是编辑器似乎没有将HTML5元素识别为独立的块元素，而是将<section>，<aside>和其他HTML5标记包含在{{1容器！

CMS页面使用的<p>...</p>是“XHTML Transitional”，这是我无法控制的。但是，我在我的自定义CSS中声明我正在使用的所有HTML5元素都应该显示为块元素，我甚至还包含了一个HTML5shiv.js帮助脚本，以便将这些元素的支持扩展到旧浏览器。

例如：

DOCTYPE

正在变成：

This is a paragraph. <!-- using SHIFT+ENTER in the WYSIWYG -->
This should be a new line in the paragraph. <!-- using ENTER in the WYSIWYG -->


<section>
    <article>Some block text</article>
</section>

按下“保存”按钮后。

首先，当现代浏览器与旧浏览器在<p>This is a paragraph.<br/>  This should be a new line in the paragraph.</p> <p></p> <p></p> <p><section><article>Some block text</article></section></p>标记内看到<section>时会做什么？他们如何针对这种情况调整DOM？我在页面上探索了包括IE9 +在内的所有现代浏览器的最终DOM，他们似乎忽略了错误的容器<p>标签，并且/或者在解析HTML5元素之前关闭它们。

但是，在Android的Mobile 2.1浏览器（仅限2.1）和IE7及更早版本上观看时，行为就到处都是。

知道：

我不有权将FCKeditor文件修改为this post explains。
我不有权配置CMS正在使用的WYSIWYG编辑器，也不会更新它
我只能运行<p>...</p>个脚本，不允许<script type="text/javascript"> 。

如何为遇到问题的旧浏览器解决此问题？

Answer 1

较旧的浏览器会将HTML5元素视为带有DOM的内联元素：

<p>
  <section>...</section>
</p>

现代浏览器会将<p>标记分为两个部分，从而产生DOM：

<p></p>
<section>...</section>
<p></p>

考虑到这一点，如果不删除多余的section，您可以检测p的父级是否为<p>。 http://jsfiddle.net/kJzSs/1/

var sections=document.getElementsByTagName('section');
for(var i=0;i<sections.length;i++){
   if(sections[i].parentNode.localName!='p'){
      sections[i].previousElementSibling.remove();
      sections[i].nextElementSibling.remove();
   }
}

要更加小心，在删除兄弟姐妹之前添加一个检查可能会很好，例如：

if(sections[i].previousElementSibling.localName=='p')

if(sections[i].previousElementSibling.textContent=='')

Answer 2

最后，我决定在'display: inline !important'元素中使用<p>任何<article>元素而不是来“扁平化”内容。我想是简单的出路！

FCKeditor使用<p>标签包装某些HTML5元素 - 导致旧浏览器出现问题</p>

2 个答案: