是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不能支持這種標記。

查看the ticket瞭解更多。

Answer 2

有一個可行的解決方法，使用xsl將任何未知元素映射到使用原始元素作爲classname的div或span-tag，然後反轉onsubmit。我們會一直這樣做，並回到xml，它工作得很好。

Answer 3

對於未來的人來此與同樣的問題，我沒有拿出一個解決方案，但我不是太樂意了，因爲應該是這樣的一個選項，因爲它是PERFECTLY有效的HTML5

在你config.js文件，添加以下配置設置：

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

這裏的正則表達式工作的演示：DEMO

基本上所有我們在這裏所做的是：

1. 查找新線\r
2. 發現了新行\n
3. 發現任何開放主播：<a後跟文字，直到我們來到> - (<a([^*>]+>)
4. 查找閉合錨定標記<\/a>

此正則表達式將停止validing找到的結果，我敢肯定有一個更好的方式來做到這一點，因爲我又不是regexPERT（< - 擅長的雙關語雖然）

這應該禁用的UI以wysiwyg模式編輯錨點。這個固定的工作對我來說是因爲我添加的編輯器在源代碼模式下是固定的，所以這對於這個目的是很好的。

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

希望這有助於

Answer 4

在你的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，不是最好的解決方案，但功能