owned this note
owned this note
Published
Linked with GitHub
# CKEditor
文字編輯器。
- [官網](https://ckeditor.com/)
- 範例版本：5
<hr>
## <font color="#0000E3">使用 CDN</font>
- [官方教學](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/quick-start.html#installing-ckeditor-5-from-cdn)
<br>
### 🔧 <font color="#009100">模組</font>
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 略... -->
<!-- 載入 CKEditor CSS -->
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css" />
</head>
<body>
<div id="editor">
<p>Hello from CKEditor 5!</p>
<p>使用 Module 載入！</p>
<p>具名匯入所有需要使用的模組。</p>
</div>
<script type="module">
// 載入 CKEditor 模組
import {
ClassicEditor,
Essentials,
Bold,
Italic,
Font,
Paragraph
} from 'https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.js';
// 使用 CKEditor
ClassicEditor
.create(document.querySelector('#editor'), {
plugins: [Essentials, Bold, Italic, Font, Paragraph],
toolbar: [
'undo', 'redo', '|', 'bold', 'italic', '|',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
]
})
.then( (newEditor) => {
console.log(`newEditor ==>`, newEditor);
} )
.catch( (error) => {
console.error(error);
} );
</script>
</body>
</html>
```
<br>
### 🔧 <font color="#009100">全域變數</font>
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 略... -->
<!-- 載入 CKEditor CSS -->
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.css" />
</head>
<body>
<div id="editor">
<p>Hello from CKEditor 5!</p>
<p>使用 全域變數 載入！</p>
<p>由 CKEDITOR 解構所有需要使用的物件。</p>
</div>
<!-- 載入 CKEditor JS -->
<script src="https://cdn.ckeditor.com/ckeditor5/43.2.0/ckeditor5.umd.js"></script>
<script>
// 解構要使用的物件
const {
ClassicEditor,
Essentials,
Bold,
Italic,
Font,
Paragraph
} = CKEDITOR;
// 使用 CKEditor
// 同模組範例，這邊省略...
</script>
</body>
</html>
```
<hr>
## <font color="#0000E3">使用 NPM</font>
- [官方教學](https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/quick-start.html#installing-ckeditor-5-using-npm)
### 🔧 <font color="#009100">安裝</font>
```node
npm install ckeditor5
```
### 🔧 <font color="#009100">使用</font>
- HTML
```html
<div id="editor1">
<p>預設不會有高度，高度是隨著內容而撐開。</p>
</div>
```
- JS
```javascript
<script type="module">
import 'ckeditor5/ckeditor5.css';
import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5';
ClassicEditor
.create(document.querySelector('#editor1'), {
plugins: [Essentials, Bold, Italic, Font, Paragraph],
toolbar: [
'undo', 'redo', '|', 'bold', 'italic', '|',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
]
})
.catch((error) => {
console.error(error);
});
</script>
```
- 結果畫面
<hr>
## <font color="#0000E3">客製模板</font>
官方網站有提供客製模板的功能，將項目選一選之後，就會產出一套寫好的模板，並提供多種風格的程式碼。
在 [官網首頁](https://ckeditor.com/) 展開 `CKEditor 5` 項目，點擊 [Builder](https://ckeditor.com/ckeditor-5/builder/?redirect=docs)。
**第一階段：**
選擇一個比較接近自己想要的模板，左邊為模板，右邊為預覽畫面。
**第二階段：**
挑選特徵，左邊會列出大項目，要注意裡面還可以展開小項目，藉由右邊的預覽畫面來確認選擇的特徵是什麼。
⭐ **要注意此階段所選擇的特徵，有的是需要付費的。**
如下圖，有標示 **==Premium inside==** 的大項，代表裡面有小項目是需要付費的。
展開大項目後，裡面有標示 **==星號==** 的小項目，即代表付費項目。
這會影响到最後產出階段，可能會需要 license key。
**第三階段：**
可以選擇要不要 Menu bar。
**最後準備產出模板。**
### <font color="green">含有付費功能</font>
**第一步：**
如果有選到需付費的項目，這邊會先需要 license key。
如果沒有給 license key，之後下載的模板功能都會鎖住不能使用。
**第二步：**
選擇程式碼風格，依據自己的需求選擇。
我這邊沒有使用框架，因此選擇 `Vanilla JS`（普通的 JS）。
`Select integration method` 我選擇使用 CDN。
`Choose output` 我選擇了 Copy code 的方式。
接下來就會出現 source code 供拷貝，有 HTML、CSS、JS 三個檔案，依照其指示建置完成後，就可以執行了！
執行時可能會出現以下 alert 警告，這是因為沒有給 license key，按掉即可。
接著就可以看到模板畫面，但如果沒有 license，工具列的功能就會是鎖住不能用的狀態。
[範例](https://githubplayerzero.github.io/mystudy-html-css-js/practice/CKEditor/sample1/ckeditor_sample1.html)
### <font color="green">沒有付費功能</font>
不會有 license key 的要求，因此第一步即是選擇程式碼的風格，第二步即下載 source code。
執行之後，工具列的功能都可以使用。
[範例](https://githubplayerzero.github.io/mystudy-html-css-js/practice/CKEditor/sample2/ckeditor_sample2.html)
<hr>
## <font color="#0000E3">問題處理</font>
當內容輸入太長且沒有可供折行的地方時，CKEditor 就會把寬度撐開，而造成畫面出現 X 軸。
解決方法是——**設定父層容器的寬度**。
一旦父層容器的寬度有限制，CKEditor 就不會無限擴張，而會自動折行。
<hr>
## <font color="#0000E3">範例</font>
- [CodePen - CKEditor 測試](https://codepen.io/codepenplayer/pen/zYgZLZw)
- 切版作品 - 後台維護：[Page](https://githubplayerzero.github.io/back-desk-bs5/assignment.html)（點擊 `Reply` 按鈕出現編輯區）｜[Repo](https://github.com/GitHubPlayerZero/back-desk-bs5/blob/main/pages/assignment.html#L327)
<hr>
## <font color="#0000E3">學習心得</font>
由於好幾個地方要搭配設定，撰寫上比較複雜，編輯器可以使用的功能又多，因此一開始要熟悉比較麻煩。
我是先用官網客製一份模板出來（當然在選擇工具的過程中也需要花點時間去看 😂），再參考其 source code。
模板製作出來後，對照畫面，從 toolbar 裡找到想要的工具，將名稱拷貝到自己的程式裡。
比如想要 `heading`，我就貼到自己程式的 `toolbar` 中，執行之後會發生錯誤，因為一些相關的物件並沒有設定進來（`plugins`）。
可以點擊錯誤訊息中的連結，會導到官網說明。
點擊說明中的 `Plugin` 連結，會導到 [API 文件](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_plugin-Plugin.html)。
可以在 API 文件中搜尋關鍵字，比如 `heading`。
但有時 toolbar 和 API 的使用名稱未必會完全一樣，這時也可以去 [Features](https://ckeditor.com/docs/ckeditor5/latest/features/index.html) 裡查找範例。
總之，大概就是這裡看看、那裡試試，慢慢把架構寫法摸索出來。
需要耐著性子去嘗試就是了... 💪
<hr>
## 參考
- [CKEditor 5 文字編輯器 (研究心得)](https://medium.com/@charming_rust_oyster_221/ckeditor-5-%E6%96%87%E5%AD%97%E7%B7%A8%E8%BC%AF%E5%99%A8-%E7%A0%94%E7%A9%B6%E5%BF%83%E5%BE%97-519c97f20a4)
<!--
- [Vue店商網頁-CKeditor5套件使用](https://hackmd.io/@SkT7-27LSWWQi5G2DJBLkw/HyRzmUCDq)
- [Vue3 + CKEditor5 基本安裝、設定語系、樣式套用](https://uli1313.github.io/2024/240321/)
- [CKeditor 5 online-builder on React手把手配置流程](https://luoyaru.medium.com/ckeditor-5-online-builder-on-react%E6%89%8B%E6%8A%8A%E6%89%8B%E9%85%8D%E7%BD%AE%E6%B5%81%E7%A8%8B-efe78706cc19)
-->
Google Drive
Gist
Clipboard
Sign in with Wallet
