mentor-program-day70

進入 7 字頭。

進度

今天把昨天沒做完的筆記做完，也寫了作業的問答題，但還沒寫完，明天要趕快補齊。

學到的事情

在寫 CKEditor 的使用方法 的時候卡在一個地方卡了很久，最後發現原來是下載到太舊的版本，真是囧到極致 orz。

後來也因為好奇官方文件寫的兩種方法到底差在哪，研究了一段時間。

1. 直接用 JS 引入：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';  // <--- ADDED
ClassicEditor
  .create(document.querySelector( '#editor' ), {
    plugins: [Indent],  // <--- ADDED
    toolbar: {
      items: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'outdent',
        'indent',  // <--- ADDED
        '|',
        'uploadImage',
        'blockQuote',
        'insertTable',
        'mediaEmbed',
        'undo',
        'redo',
      ]
    },
  })
  .catch( error => {
    console.error( error );
});

2. 先改源碼在重新 build 一份：

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    Alignment   // <--- ADDED
    // ...
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            'bold',
            'alignment'  // <--- ADDED
            // ...
        ]
    },
    // ...
};

我用的方法是第二種，還蠻好理解的，就是先改好設定後再重新 build 一份來用的概念。但第一種我在試的時候怎麼用都不行，直到後來看了 webpack 新手教學之淺談模組化與 snowpack 才知道原來要先用 webpack 來打包後再拿來用，後來照做後就成功引入了。

不過還是有個沒解開的問題，就是要添加新的 plug-in 時一直噴 duplicated modules（模組重複載入）的錯誤。

後來爬了這篇 提問 才知道問題應該出在這一句：

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

按照官方文件的意思是不可以在已經 build 後的檔案裡加新的 plug-in，因為 plug-in 可能需要依賴 src 裡面的其他套件（相依姓 dependencies）。另外 plug-in 也有一些 code 是 bundle 裡面已經有的，這就會導致duplicated modules（模組重複載入）的問題。（不過我還是沒試成功，怕花太多時間，所以之後有機會在試吧）

題外話

有時候明明就大概懂了卻還是搞不定，真是件令人傷心的事。

許願池

明天要把 week11 結束，加油！