Rollup-plugin-nhập ví dụ css

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 lai

Do đó, đ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

  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
  

  11, vì vậy bạn cần có các trình tải phù hợp
• 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ó

  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
  

  12
• Cuối cùng, để bản địa hóa trình soạn thảo, bạn cần sử dụng plugin 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
  

  2

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

1

Nế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

5

Chạ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ự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

7

Mô-đ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

9

Chạ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

0

Tò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ựng

Trướ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ữa

Mộ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

58

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

4

Và 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

5

Bâ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

8

Sau đó, 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

71

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

0

Và 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ê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

1

Thiế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

73

Gó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 ES5

Mỗ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?