CKEditor 5 hiện được xây dựng bằng webpack@5. Tất cả các bản dựng, ví dụ và trình diễn đều được tạo bằng gói này. Cũng có thể xây dựng CKEditor 5 bằng cách sử dụng các gói khác [nếu chúng được định cấu hình đúng cách], chẳng hạn như Rollup hoặc Browserify, nhưng các thiết lập này chưa được hỗ trợ chính thức. Ngoài ra,
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
2 cho phép bản địa hóa trình chỉnh sửa chỉ khả dụng cho webpack. Nhiều công việc về chủ đề này sẽ được thực hiện trong tương laiDo đó, điều kiện tiên quyết đối với hướng dẫn này là bạn đang sử dụng webpack làm công cụ xây dựng của mình
Kịch bản này cho phép bạn kiểm soát hoàn toàn quá trình xây dựng CKEditor 5. Điều này có nghĩa là bạn sẽ không thực sự sử dụng các bản dựng nữa mà thay vào đó, hãy xây dựng CKEditor từ nguồn trực tiếp vào dự án của bạn. Phương pháp tích hợp này cung cấp cho bạn toàn quyền kiểm soát những tính năng nào sẽ được đưa vào và cách cấu hình webpack
Có thể đạt được các kết quả tương tự như phương pháp này cho phép bằng cách tùy chỉnh bản dựng hiện có và tích hợp bản dựng tùy chỉnh của bạn. Điều này sẽ giúp thời gian xây dựng nhanh hơn [vì CKEditor 5 sẽ được xây dựng một lần và được cam kết], tuy nhiên, nó yêu cầu duy trì một kho lưu trữ riêng và cài đặt mã từ kho lưu trữ đó vào dự án của bạn [e. g. bằng cách xuất bản gói npm mới hoặc sử dụng các công cụ như Lerna]. Điều này làm cho nó kém thuận tiện hơn so với phương pháp được mô tả trong tình huống này
Trước hết, bạn cần cài đặt các gói nguồn mà bạn sẽ sử dụng. Nếu tích hợp của bạn dựa trên một trong các bản dựng hiện có, bạn có thể lấy chúng từ tệp
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
3 của bản dựng đó [xem e. g. bản dựng cổ điển của npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
3]. Tại thời điểm này, bạn có thể chọn trình tạo trình chỉnh sửa và các tính năng bạn muốn. Tuy nhiên, hãy nhớ rằng tất cả các gói [không bao gồm npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
5] phải có cùng phiên bản với gói trình chỉnh sửa cơ sởSao chép các phụ thuộc này vào
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
3 của bạn và gọi cho npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
7 để cài đặt chúng. Phần npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
8 [hoặc npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
9] của npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
3 sẽ gần giống như thế này"dependencies": {
// ...
"@ckeditor/ckeditor5-adapter-ckfinder": "^x.y.z",
"@ckeditor/ckeditor5-autoformat": "^x.y.z",
"@ckeditor/ckeditor5-basic-styles": "^x.y.z",
"@ckeditor/ckeditor5-block-quote": "^x.y.z",
"@ckeditor/ckeditor5-easy-image": "^x.y.z",
"@ckeditor/ckeditor5-editor-classic": "^x.y.z",
"@ckeditor/ckeditor5-essentials": "^x.y.z",
"@ckeditor/ckeditor5-heading": "^x.y.z",
"@ckeditor/ckeditor5-image": "^x.y.z",
"@ckeditor/ckeditor5-link": "^x.y.z",
"@ckeditor/ckeditor5-list": "^x.y.z",
"@ckeditor/ckeditor5-paragraph": "^x.y.z",
"@ckeditor/ckeditor5-theme-lark": "^x.y.z",
"@ckeditor/ckeditor5-upload": "^x.y.z"
// ...
}
Bước thứ hai là cài đặt các phụ thuộc cần thiết để xây dựng trình chỉnh sửa. Danh sách có thể khác nếu bạn muốn tùy chỉnh cấu hình webpack, nhưng đây là cách thiết lập điển hình
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
cấu hình webpack
Bây giờ bạn có thể cấu hình webpack. Có một số điều bạn cần quan tâm khi xây dựng CKEditor 5
- Xử lý file CSS của theme CKEditor. Chúng được bao gồm trong 5 nguồn của CKEditor bằng cách sử dụng các câu lệnh
11, vì vậy bạn cần có các trình tải phù hợpnpm install --save \ @ckeditor/ckeditor5-dev-webpack-plugin \ @ckeditor/ckeditor5-dev-utils \ css-loader@5 \ postcss-loader@4 \ raw-loader@4 \ style-loader@2 \ webpack@5 \ webpack-cli@4
- Tương tự, bạn cần xử lý các biểu tượng SVG theo nhóm, cũng được nhập trực tiếp vào nguồn. Để làm được điều đó, bạn cần có
12npm install --save \ @ckeditor/ckeditor5-dev-webpack-plugin \ @ckeditor/ckeditor5-dev-utils \ css-loader@5 \ postcss-loader@4 \ raw-loader@4 \ style-loader@2 \ webpack@5 \ webpack-cli@4
- Cuối cùng, để bản địa hóa trình soạn thảo, bạn cần sử dụng plugin webpack
2npm install --save \ @ckeditor/ckeditor5-dev-webpack-plugin \ @ckeditor/ckeditor5-dev-utils \ css-loader@5 \ postcss-loader@4 \ raw-loader@4 \ style-loader@2 \ webpack@5 \ webpack-cli@4
Cấu hình tối thiểu, giả sử rằng bạn sử dụng các phương pháp xử lý nội dung tương tự như các bản dựng CKEditor 5, sẽ trông như thế này
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
1Nếu bạn không thể sử dụng webpack mới nhất [tại thời điểm viết hướng dẫn này là 5], cấu hình được cung cấp cũng sẽ hoạt động với webpack 4
Webpack Encore
Nếu bạn sử dụng Webpack Encore, bạn có thể sử dụng cấu hình sau
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
5Chạy trình chỉnh sửa – phương pháp 1
Bây giờ bạn có thể nhập tất cả các plugin cần thiết và trình tạo trực tiếp vào mã của mình và sử dụng nó ở đó. Cách dễ nhất để làm như vậy là sao chép nó từ tệp
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
14 có sẵn trong mọi kho lưu trữ bản dựngnpm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
7Mô-đun này sẽ xuất một lớp trình tạo trình soạn thảo có tất cả các plugin và cấu hình mà bạn cần đã được tích hợp sẵn. Để sử dụng trình soạn thảo như vậy, chỉ cần nhập lớp đó và gọi phương thức tĩnh
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
15 như trong tất cả các ví dụnpm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
9Chạy trình chỉnh sửa – phương pháp 2
Biến thể thứ hai về cách chạy trình chỉnh sửa là sử dụng trực tiếp lớp người tạo mà không cần tạo lớp con trung gian. Đoạn mã trên sẽ dịch sang
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
0Tòa nhà
Cuối cùng, bạn có thể xây dựng ứng dụng của mình. Chạy webpack trên dự án của bạn và trình soạn thảo văn bản phong phú sẽ là một phần của nó
Quyền mua. Giảm thiểu JavaScript
Webpack 4 đã giới thiệu khái niệm về chế độ. Nó đi kèm với hai chế độ được xác định trước.
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
16 và npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
17. Cái sau tự động kích hoạt npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
18 đảm nhiệm việc thu nhỏ JavaScript. Do đó, chỉ cần thực thi npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
19 với tùy chọn npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
50 hoặc đặt npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
51 trong npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
52 của bạn để tối ưu hóa bản dựngTrước phiên bản 1. 2. 7
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
18 có một lỗi khiến webpack gặp sự cố với lỗi sau. npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
54. Nếu bạn gặp phải lỗi này, hãy đảm bảo rằng npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
55 của bạn chứa phiên bản cập nhật của gói này [và gói web đó sử dụng phiên bản này]Bản dựng CKEditor 5 sử dụng
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
56 thay vì npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
18 vì bản dựng sau không được hỗ trợ nữaMột trong những yêu cầu phổ biến nhất là trích xuất CKEditor 5 CSS thành một tệp riêng biệt [theo mặc định, nó được bao gồm trong tệp JavaScript đầu ra]. Để làm điều đó, bạn có thể sử dụng
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
58npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
4Và thêm nó vào cấu hình webpack của bạn
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
5Bây giờ, Webpack sẽ tạo một tệp riêng có tên là
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
59 mà bạn sẽ cần tải thủ công vào HTML của mình [sử dụng thẻ npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
70]Quyền mua. Xây dựng mục tiêu ES5
CKEditor 5 được viết bằng ECMAScript 2015 [còn gọi là ES6]. Tất cả các trình duyệt hiện đang hỗ trợ CKEditor 5 đều có đủ hỗ trợ ES6 để chạy CKEditor 5. Nhờ đó, các bản dựng CKEditor 5 cũng được xuất bản ở định dạng ES6 gốc
Tuy nhiên, có thể xảy ra trường hợp môi trường của bạn yêu cầu ES5. Chẳng hạn, nếu bạn sử dụng các công cụ như UglifyJS ban đầu chưa hỗ trợ ES6+, bạn có thể cần chuyển nguồn CKEditor 5 sang ES5. Điều này sẽ tạo ra các bản dựng lớn hơn ~80% nhưng sẽ đảm bảo rằng môi trường của bạn có thể xử lý mã CKEditor 5
Để tạo bản dựng ES5 của CKEditor 5, bạn có thể sử dụng Babel
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
8Sau đó, thêm mục này vào phần webpack
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
71npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
0Và tải
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
72 [cần thiết để làm cho trình tạo ES6 hoạt động sau khi dịch mã] bằng cách thêm nó làm điểm vào đầu tiênnpm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
1Thiết lập này đảm bảo rằng mã nguồn được dịch sang ES5. Tuy nhiên, nó không đảm bảo rằng tất cả các polyfill ES6 đều được tải. Do đó, nếu bạn muốn, ví dụ, thử mang lại khả năng tương thích với IE11, hãy đảm bảo cũng tải
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
73Gói
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
74 cho phép bạn chọn môi trường mà bạn muốn hỗ trợ và chuyển mã các tính năng của ES6+ để phù hợp với khả năng của môi trường đó. Nếu không có cấu hình, nó sẽ tạo ra các bản dựng ES5Mỗi ngày, chúng tôi làm việc chăm chỉ để giữ cho tài liệu của chúng tôi hoàn chỉnh. Bạn đã phát hiện ra một thông tin lỗi thời?