在CKEditor 5中呈現HTML頁面

Question

問題陳述：我最近從CKEditor 4更新到CKEditor 5，並面臨渲染Html頁面的問題。 我發現當我向CKEditor 5提供HTML內容時，它會刪除所有樣式並呈現為純HTML。

我經歷了一些不同的問題和問題，我發現CKEditor 5實現了一個自定義數據模型。 這意味着加載到編輯器中的每個內容都需要轉換為該模型，然后再渲染回視圖。

*以下是在ckeditor5中重現問題的預覽鏈接：*

CKEditor 4： https ： //codepen.io/bhuvavaibhav2rs/pen/rNBxbwG

CKEditor 5： https ： //codepen.io/bhuvavaibhav2rs/pen/yLBerKb

在CKEditor 4中，在給出以下配置后，它按預期工作：

CKEDITOR.replace('editor1', {
        fullPage: true,
        allowedContent: true
      });

在CKEditor 5中，我們無法找到相同的上述配置。

Answer 1

由於v5中的體系結構更改， 您無法使用與使用CKEditor 5的v4相同的方式編輯HTML 。 請繼續閱讀以了解原因。

經過一些沒有成功的實驗，我挖到了源代碼庫，並從項目的貢獻者那里得到了這個問題評論 ：

嗨，在CKE5中無法插入任意HTML。 這有幾個原因。

此外， 鏈接的問題解釋了v5 API更改背后的原因：

到目前為止，我一直在談論CKEditor 4. CKEditor 5的不同之處是什么？

CKEditor 4使用DOM作為模型。 加載數據時，HTML會被處理（讀取 - 過濾，規范化和轉義），但最終會在DOM中結束。

CKEditor 5具有自定義數據模型。 當您將HTML加載到編輯器中時，它會被解析，然后功能（先前在編輯器中初始化）嘗試從這個HTML中獲取他們理解的部分。 這稱為“轉換”。 作為轉換的結果，內容被加載到自定義數據結構中。 當需要將內容呈現回DOM（用於編輯或用於數據檢索）時，執行相反的過程。

這意味着如果您沒有處理某個HTML標記/屬性/樣式/任何內容的功能，編輯器將自動刪除它。

是否有支持HTML編輯的CKEditor 5插件？

不，社區建議 使用CKEditor 4 。

參考文獻：

• 問題＃664解釋了v5中深入的架構變化
• 對問題＃592發表評論