【筆記】CKEditor(v4.12.1) + CKFinder(v3.5.1) 插件安裝及相關設定

大家好，我是十六。

最近客戶要求要在 CKEditor 中插入音訊及希望有新的模板(Templates)，在此記錄相關插件安裝及需要調整的設定。

CKEditor 的插件查詢及下載請至官網。

版本環境：

Ubuntu 18.04
CKEditor v4.12.1
CKFinder v3.5.1

本次主要提到的插件為 Audio 及 Templates 兩個。

一、插入音訊

客戶希望在文章中插入音訊，但沒有給予很明確的要求。因此一開始我先確認 CKFinder 已可以上傳及選擇 mp3 檔案後，請客戶使用 iFrame 的方式連到檔案，試圖避免對設定檔及插件的調整。

iFrame 的確能夠連結到 mp3 檔案，也能正常播放，但在現在 (2021-09) 不同的瀏覽器對這樣的 iFrame 會有不同樣式顯示。比如說筆者平時使用的 FireFox 是顯示音訊──只有播放鈕、進度條及音量鈕──的樣子，但 Chromium 系列的瀏覽器卻會顯示影片的樣子，也就是還會多出黑色的畫面框。 而且客戶的 Chrome 瀏覽器甚至出現自動播放的情形 (筆者以為主流瀏覽器應都原則上封鎖有聲音的自動播放，著實嚇了一跳)，因此決定放棄這條路。

在搜尋過常用插件後，本想直接使用一次解決所有媒體檔案的插件，以免未來客戶又提出相關需求。但搜尋到常用的幾個插件需要有 iframely 的 API 串接，最後還是使用簡單的 Audio 插件。

設定及注意事項：

基本的插件安裝方法為自網站下載插件檔案後，解壓縮後整個目錄放至以下路徑。你應該也會在裡面看到原本安裝時已經放在裡面的插件。

(CKEditor 安裝路徑)/plugins/

可能是插件作者在編寫時有出現 typo，直接呼叫此插件會出現錯誤。此時參考插件頁面下方留言，將插件的目錄名、檔名及內容中的 Audio 都改為 audio。(此舉會連同部分插件的使用提示等內容一起改掉，對文字敘述有強烈要求的人可以再細看相關內容，此處僅提供較快的做法。)

打開使用 CKEditor 的網頁檔案，在 config 加上參數：

<script>

CKEDITOR.replace( '(自訂ID)', {
    (省略原本的參數),
    extraPlugins: 'audio', //引入插件
    allowedContent: true, //調整相關 filter 以防 audio label 被自動刪除
    extraAllowedContent:'audio;*(*);*{*}',
});

</script>

再次打開該網頁，應該就能看到 audio 插件並使用了。

 

二、新增 Templates

原本下載 full package 的 CKEditor 中，安裝有 Templates 插件，並預設提供了三個模板。作為一個能夠自己寫程式的人，筆者建議可以切換至原始碼模式自行編寫，但顯然並不是所有人都會或者有時間精力去學習。而作為一個在本專案不具有 PM 權限工程師，滿足客戶的需求就是我的工作。

在前一段已經提到，基本上插件檔案都放在同一個路徑。若你原本就有安裝這個插件，應該能在以下路徑找到相關檔案。

(CKEditor 安裝路徑)/plugins/templates/

打開 templates/default.js 就能看到預設的三個模板的原始碼。可以看出此插件使用 CKEDITOR.addTemplates 這個 function 來加入模板，包含模板的名稱、縮圖、敘述跟原始碼等等。

在網路上搜尋了一些資訊後，發現只需要設定名稱跟原始碼即可，因此你可以用以下的方式加入自己編寫的模板。

<script>

CKEDITOR.addTemplates('(自訂模板組名稱)',{templates:[
    {
        title:"(自訂模板名稱)",
        html:"(自訂模板內容)"
    },
    {
        (以下格式同上)
    },......
]});
CKEDITOR.replace( '(自訂ID)', {
    (省略原本的參數),
    templates: '(自訂模板組名稱)' //引入自訂模板組
});

</script>

再次打開網頁，點選模板插件，應該就能看到新加入的模板了。若是想要加入縮圖跟敘述，可參考原本的預設 js 檔。

 

以上是今天的筆記。