讓你的 Drupal 9 CKEditor 流行起來——7 個你不知道的有用模塊

已發表: 2021-12-06

內容編輯器基本上是 CMS 最關鍵的功能。有了像 CKEditor 這樣的強大工具作為其默認的富文本編輯工具，Drupal 大大提升了其內容管理遊戲，為 Drupal 8/9 提供了一些新功能，如 CKEditor 小部件系統和高級內容過濾器 (ACF)。所以，是的，即使使用默認功能，它也非常強大……但是您可以在一些貢獻的模塊和插件的幫助下真正提升您的 CKEditor 遊戲。繼續閱讀以了解我們對最佳和最有趣的附加組件的看法，以擴展 CKEditor 的功能和可用性。

Drupal 9 CKEditor

首先，對於 Drupal 的新手，CKEditor 4.5 是 Drupal 8/9 中默認的 WYSIWYG（所見即所得）豐富的編輯器。它是一個文本編輯器，可幫助網站管理員直接在網頁中編寫和編輯內容。與 Drupal 一樣，CKEditor 是一個開源項目，最近升級了許多強大的新功能，這些功能將繼續改進。作為 Drupal 10 準備計劃的一部分，Drupal 貢獻者正在努力在 Drupal 10 中實現最新和最現代的版本 - CKEditor 5。

現在我們已經了解了基礎知識，讓我們開始升級吧！

使用這些出色的 Drupal 9 模塊擴展 CKEditor

1. CKEditor 閱讀更多

你知道那些時候你想讓讀者選擇查看大量文本的其餘部分嗎？這是您使用 CKEditor 閱讀更多功能的提示，它邀請您的用戶“繼續閱讀”，同時仍然為您的頁面提供緊湊的佈局。為了添加它，Drupal 9 提供了一種簡單易行的方法來在您安裝貢獻者模塊後啟用 Read More / Show Less 功能。

模塊實現：

安裝此模塊後，您需要配置一些設置：

編輯首選文本格式並啟用“限制允許的 HTML 標籤”。
在“允許的 HTML 標籤”中添加<div data-readmore-less-text data-readmore-more-text data-readmore-type class="ckeditor-readmore"> 。禁用“限制允許的 HTML 標籤”並點擊保存。
現在將“閱讀更多”圖標從可用按鈕拖放到活動工具欄（如上圖所示）並點擊保存。
清除緩存後，當您選擇“首選文本格式”時，您會在文本編輯器中找到“閱讀更多”圖標。

如何使用它：

在內容區域內，單擊“文本格式”圖標。現在你會得到一個矩形框。添加您要在用戶單擊“閱讀更多”後顯示的其餘內容。

常見問題：我可以修改閱讀更多文本嗎？

絕對地！只需單擊“CKEditor 插件設置”中的“閱讀更多按鈕”選項卡並更改文本。

2. CKEditor 顏色按鈕

默認情況下，CKEditor 不提供在編輯器中更改文本顏色的選項。但是，如果您確實想更改特定文本的顏色，甚至用不同顏色突出顯示文本，則 Drupal 9 CKEditor 顏色按鈕模塊應該在您的列表中。請注意，此模塊還需要安裝面板按鈕模塊，並且這兩個模塊都需要安裝庫、顏色按鈕庫和麵板按鈕庫。在主題的庫文件夾中安裝模塊並添加庫後，我們可以將顏色按鈕從可用按鈕移動到首選文本格式的活動工具欄。

常見問題解答：我可以添加自定義顏色嗎？

是的！如果您不想使用任何已經可用的默認顏色，您也可以設置自定義顏色。您可以在激活顏色選項的“文本編輯器格式”部分中執行此操作。在“文本編輯器格式”的“CKEditor 插件設置”部分找到“CKEditor 顏色按鈕”，在“文本顏色”文本區添加顏色，逗號分隔且不帶# 號。

3. CKEditor Youtube

Drupal 9 CKEditor Youtube 模塊可幫助您將 Youtube 視頻添加到您的內容中，而無需長嵌入代碼。安裝 Youtube 圖標並將其從可用按鈕移動到活動工具欄後，您可以在文本編輯器中以首選文本格式找到 Youtube 圖標。該模塊依賴於庫。

這個模塊最好的地方之一是靈活性。如上圖所示，您可以在指定寬度和高度的同時“粘貼嵌入代碼”或粘貼 Youtube URL。此外，您還有一些方便的選項，例如“自動播放”、“在（特定時間）開始”和“顯示播放器控件”。

4. CKEditor 模板和CKEditor 模板用戶界面

您的網站頁面或帖子有很多相同的內容結構嗎？ CKEditor 模板和 CKEditor 模板用戶界面模塊是您輕鬆複製的門票。這兩個模塊都依賴於可以按照模塊頁面中的說明下載和安裝的庫。安裝這些庫後，您可以將模板圖標從可用按鈕移動到活動工具欄，如下圖所示。

CKEditor 模板模塊提供了一個帶有預定義模板的對話框彈出窗口。當您單擊模板圖標（如上面的屏幕截圖所示）時，您將看到一個彈出窗口，您可以選擇任何預定義的模板。然後將使用包含的“文本格式和样式”插入模板。

CKEditor 模板用戶界面模塊用於創建您在CKEditor 模板模塊中選擇的模板。啟用該模塊後，您將在Config > Content Authoring > CKEditor Templates部分找到一個選項。

當您從配置中單擊CKEditor 模板時，您將被重定向到CKEditor 配置模板頁面。現在您可以添加或編輯模板。

5. CKEditor CodeSnippet

使用 CKEditor CodeSnippet 模塊，您可以在內容中添加您的“代碼內容”，使其突出顯示並格式化。該模塊使用highlight-js庫和它的所有可用樣式。使用 composer 安裝此模塊將自動安裝庫。安裝此模塊後，您可以將“代碼片段”圖標從可用按鈕移動到活動工具欄。

現在您將在文本格式的CKEditor 插件設置中找到Code Snippet選項卡。您可以在此處選中/取消選中支持的編程語言。

常見問題：如何使用？

安裝該模塊後，您可以在來自 CKEditor 的內容中插入 CodeSnippet 功能。當您單擊代碼片段圖標時，您將看到一個彈出窗口。在這裡，您可以粘貼代碼並選擇代碼語言。

6. CKEditor 字數統計

因此，您正在處理字/字符限制……這是具有動態佈局的高度風格化站點中的常見情況。如果多人同時處理相同的內容，這些可能會變得特別混亂。在這些情況下，在編輯器本身的頁腳中查看 CKEditor 中的字符和單詞數會很有幫助（就像在 MS Word 中一樣）。那時您將安裝 CKEditor Wordcount 模塊。安裝模塊和庫後，可以在文本格式的CKEditor插件設置中找到“字數和字符數”。在這裡，您可以根據自己的要求選中/取消選中功能。您還將在 CKEditor 的右下角找到一個計數器。

7. CKEditor 推文文本

試圖獲得一些互聯網積分？使用 CKEditor Tweetable Text 模塊，您可以為您的用戶提供選項，通過單擊單詞或語法來發布特定文本片段。只需按照模塊頁面中的說明安裝模塊和庫，並將可推文的文本圖標從可用按鈕移動到活動工具欄。然後，您將在文本編輯器中找到一個推文圖標。當您單擊此圖標時，將打開一個彈出窗口。在這裡，您可以添加顯示文本（要為其添加推文圖標的單詞）和推文表文本（將出現在推文中的文本）。當用戶單擊“顯示文本”時，它將重定向到 Twitter 並顯示Tweetable 文本。