html - CKEditor 4 真的为 HTML5 做好准备了吗

Question

我尝试使用新的 CKEditor 4，因为 3.6 版中的代码更正不能接受 HTML 5 有效代码，如下所示：

<a href="#"><p>something</p></a>

但是新的CKEditor版本还是修复了这个代码，那么问题出在哪里呢？是否有必要在配置中将 HTML 5 设置为默认值？

Answer 1

没有。CKEditor 解析器使用静态 DTD。HTML5 不能用静态 DTD 来描述，所以目前 CKEditor 不能支持这种标记。

查看门票以了解更多信息。

Answer 2

对于未来遇到同样问题的人，我确实提出了一个解决方案，但我对此并不太满意，因为应该有一个选项，因为它在HTML5中完全有效

在您的config.js文件中，添加以下配置设置：

config.protectedSource.push(/[\r|\n]|(<a([^*>]+>)|<\/a>)/g);

这是正则表达式工作的演示：DEMO

基本上我们在这里所做的就是：

1. 查找新行\r
2. 查找新行\n
3. 找到任何打开的锚点：<a后跟一个文本，直到我们来到>-(<a([^*>]+>)
4. 查找关闭锚标记<\/a>

这个正则表达式将停止验证找到的结果，我确信有更好的方法来做到这一点，因为我不是 regexPERT（<-- 擅长双关语！）

这应该禁用用于在所见即所得模式下编辑锚点的 UI。这个修复对我有用，因为我添加它的编辑器在源代码模式下是固定的，所以这对于这个目的来说很好。

config.allowedContent = true;
config.fullPage = false;

希望这可以帮助

Answer 3

在您的 config.js 文件中，添加以下配置设置：

// Display all children elements allowed in a <a> element.
console.log(CKEDITOR.dtd[ 'a' ]);

// Simply redefine DTD like this:
CKEDITOR.dtd['a']['div'] = 1;
CKEDITOR.dtd['a']['p'] = 1;
CKEDITOR.dtd['a']['i'] = 1;
CKEDITOR.dtd['a']['span'] = 1;

// Check if <div> can be contained in a <p> element.
console.log( !!CKEDITOR.dtd[ 'a' ][ 'div' ] ); // default false

// Check if <a> can be contained in a <div> element.
console.log( !!CKEDITOR.dtd[ 'div' ][ 'a' ] ); // default true

对于 Drupal 8，您可以将此代码添加到您的管理主题 js 中，这不是最佳解决方案，但功能强大

Answer 4

有一种可行的方法解决这个问题，使用 xsl 将任何未知元素映射到 div 或使用原始元素作为类名的跨度标记，然后在提交时反转这个。我们一直在往返于 xml 中这样做，并且它工作得很好。