Hướng dẫn build CKEditor 5 phục vụ sử dụng và phát triển

Có nhiều cách để lấy trình soạn thảo CKEditor 5, trong bài viết này hướng dẫn cách dễ dàng nhất để lấy sử dụng và phục vụ phát triển theo quan điểm cá nhân. Nếu bạn có cách hay hơn hãy để lại thảo luận bên dưới.

Build online

Truy cập công cụ Online Builder của nhà phát triển cung cấp. Tại đây ta có 5 bước đơn giản đề build ra trình soạn thảo.

Bước 1: Chọn loại trình soạn thảo, ở đây sử dụng loại Classic là thường dùng nhất
Bước 2: Chọn các plugin. Bạn có thể chọn tất cả các plugin để có một trình soạn thảo "to béo" nhất. Hoặc chỉ chọn các plugin theo nhu cầu, tại đây có cả các plugin có chữ PREMIUM, nếu bạn không mua thì không nên chọn chúng, nếu không sẽ bị hỏi một số popup khá phiền toái khi tích hợp.
Bước 3: Bạn kéo thả các icon để có thanh công cụ soạn thảo theo ý muốn
Bước 4: Bạn chọn ngôn ngữ
Bước 5: Cuối cùng bạn nhấn START và đợi. Bước này có thể mất đến 1-2 phút để chờ. Kết thúc bạn nhấn Download CKEditor 5 build để tải về máy.

Giải nén file tải về được một số file và thư mục, đây là một Node Package hoàn chỉnh để bạn có thể sử dụng phát triển. Nếu có ý định phát triển hãy giữ lại toàn bộ, nếu chỉ cần sử dụng ta quan tâm đến thư mục build trong đó có file ckeditor.js chính là trình soạn thảo. Include file này vào website là có thể sử dụng được.

Chỉnh sửa bản build

Sau khi online build được rồi bạn muốn chỉnh sửa nó hoặc cài thêm/ phát triển một số plugin mới ta tiếp tục tùy chỉnh nó. Đến bước này yêu cầu cần một số chút ít hiểu biết về Node.js, NPM, TypeScript (rất giống javascript).
Tại đống file và thư mục vừa giải nén được ở bản Online Build ta quan tâm như sau:

src/ckeditor.ts

File này là file cấu hình các plugin, thanh công cụ và config mặc định. Mở nó lên:

builtinPlugins thêm/ sửa các phần tử trong này để thêm sửa các plugin sẽ build
defaultConfig thay đổi mục toolbar ở trong này để thiết lập thanh công cụ, các phần tử còn lại trong này là config mặc định. Xem thêm tại đây

webpack.config.js

Online Builder của CKEditor 5 sử dụng webpack (một công cụ giúp bạn compile các module Javascript) để build. File này chính là thiết lập cho nó, bạn có thể sửa nó hoặc không. Đối với tôi, tôi sẽ sửa một chút ít:

sourceMap: true sửa thành false để nó không build ra file ckeditor.js.map => File này ít khi cần.
Phần CKEditorTranslationsPlugin sẽ thêm một ít vào thành như sau

new CKEditorTranslationsPlugin( {
    language: 'en',
    additionalLanguages: ['vi', 'fr', 'ru'],
    strict: true,
    verbose: false,
    outputDirectory: 'language',
    buildAllTranslationsToSeparateFiles: true
}),

Đại loại là mặc định ngôn ngữ tiếng Anh, thêm một số ngôn ngữ Việt, Pháp, Nga. Build tất cả các ngôn ngữ kể cả tiếng Anh ra file riêng, đổi thư mục ngôn ngữ thành language thay vì mặc định là translations.

tsconfig.json

CKEditor 5 viết bằng TypeScript nên file này thiết lập để biên dịch sang Javascript, cái này không cần thay đổi gì.

package.json

File thiết lập gói, tại đây bạn có thể khai báo thêm các gói, có thể thay đổi để cập nhật phiên bản....Hãy sửa thêm đoạn

  "scripts": {
    "build": "webpack --mode production",
    "postbuild": "tsc --declaration --declarationDir build --stripInternal --emitDeclarationOnly"
  }

Thành

  "scripts": {
    "build": "webpack --mode production",
    "build-dev": "webpack --mode development",
    "postbuild": "tsc --declaration --declarationDir build --stripInternal --emitDeclarationOnly"
  }

Để có thêm tùy chọn build ở chế độ phát triển, chế độ này chạy nhanh gấp đôi phục vụ phát triển.

Cuối cùng tại thư mục có chứa package.json mở Terminal lên và chạy

npm install
npm run build # Hoặc npm run build-dev

Tải bản Online Build trong bài hướng dẫn này tại đây