search

Hỗ trợ ngôn ngữ postcss

1 năms trước
Trả lời: 0
Lượt xem: 168

VSCode là một trình soạn thảo tuyệt vời để phát triển web và hỗ trợ khá tốt cho CSS. Thật không may, nó không hiểu một số tính năng của PostCSS như lồng nhau buộc phải tắt hỗ trợ CSS trong các tệp postcss. Nhưng chúng ta có thể giảm bớt điều đó bằng cách

Show
  • thêm đánh dấu cú pháp
  • phong cách linting
  • tự động định dạng
  • thêm tự động hoàn thành

cho các tập tin postcss

Hãy bắt đầu với đánh dấu cú pháp. Đó là một bước rất dễ dàng — chúng ta chỉ cần cài đặt tiện ích mở rộng cung cấp nó. ngôn ngữ-postcss. Sau nội dung này của bất kỳ tệp nào có phần mở rộng 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
2 sẽ được tô màu chính xác

Linting sẽ được cung cấp bởi stylelint. Chúng ta cần cài đặt tiện ích mở rộng stylelint cũng như một số cấu hình stylelint như stylelint-config-standard và populate. tập tin stylelintrc

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ],
  }
}

Bước tiếp theo là tự động định dạng với tiện ích mở rộng đẹp hơn mà chúng tôi cần định cấu hình để tuân thủ cấu hình stylelint của chúng tôi. Để làm điều này thêm

"prettier.stylelintIntegration": true,

vào cài đặt người dùng của bạn và thêm stylelint-config-prettier vào. stylelintrc để xóa các quy tắc không tương thích với đẹp hơn

Bước cuối cùng là thêm tự động hoàn thành. Chúng tôi sử dụng khả năng mạnh mẽ của emmet cho việc này. Trong cài đặt người dùng thêm

"emmet.includeLanguages": {
    "postcss": "css"
  },
  "emmet.syntaxProfiles": {
    "postcss": "css"
  },

Sau khi thực hiện các bước này, làm việc với PostCSS trong VSCode sẽ dễ chịu và hiệu quả hơn nhiều

CKEditor 5 có thể cung cấp bất kỳ loại trình soạn thảo WYSIWYG nào. Từ các trình chỉnh sửa trực tuyến tương tự như Google Docs và Medium, đến các ứng dụng giống như Slack hoặc Twitter, khung chỉnh sửa CKEditor 5 cung cấp các giải pháp cho mọi người dùng, cả tùy chỉnh và vượt trội. Trình soạn thảo văn bản đa dạng thức JavaScript hiện đại này với kiến ​​trúc MVC, mô hình dữ liệu tùy chỉnh và DOM ảo được viết từ đầu trong ES6 với sự hỗ trợ gói web tuyệt vời

Trong hướng dẫn này, bạn sẽ tìm hiểu cách chạy phiên bản CKEditor 5 của riêng mình. Dưới đây, bạn có thể tìm thấy hai đường dẫn duy nhất mô tả quá trình cài đặt. Chọn một (hoặc cả hai. ) và bắt đầu hành trình CKEditor 5 của bạn

đường dẫn có sẵn

Tạo bản dựng tùy chỉnh với trình tạo trực tuyến

Mặc dù trình soạn thảo WYSIWYG của CKEditor 5 đi kèm với các bản dựng được xác định trước tiện dụng, nhưng đôi khi các phiên bản đi kèm được xác định trước này là không đủ và nảy sinh nhu cầu về các bản dựng tùy chỉnh hơn. Một số lý do để tạo các bản dựng tùy chỉnh là

Đây là nơi trình xây dựng trực tuyến đến để giúp bạn

Trình tạo trực tuyến là một ứng dụng cho phép bạn thiết kế và tải xuống các bản dựng CKEditor 5 tùy chỉnh. Nó cho phép bạn tạo các gói của riêng mình với loại trình chỉnh sửa, thanh công cụ và bộ plugin mong muốn trong một vài bước đơn giản, thông qua giao diện người dùng đơn giản và trực quan

Chọn loại trình soạn thảo

Các loại trình soạn thảo sau đây hiện có sẵn để lựa chọn

Tham khảo tài liệu và ví dụ về bản dựng được xác định trước để kiểm tra xem loại trình soạn thảo WYSIWYG nào phù hợp với nhu cầu của bạn nhất. Khi bạn chọn loại trình chỉnh sửa mong muốn, hãy chọn nó để chuyển sang bước tiếp theo

Để rõ ràng, hướng dẫn này sẽ sử dụng bản dựng cổ điển làm ví dụ

Hỗ trợ ngôn ngữ postcss

Chọn plugin

Bản dựng cơ bản đi kèm với một bộ bổ trợ được xác định trước được nhóm trong một thanh ở đầu trang. Hãy dành một chút thời gian để kiểm tra các tùy chọn này. Bạn có thể tự do loại bỏ những cái sẽ không được sử dụng trong bản dựng của mình

Hỗ trợ ngôn ngữ postcss

Bên dưới thanh trên cùng với các plugin được chọn trước, bạn sẽ tìm thấy một bộ sưu tập lớn các tính năng có thể được thêm vào bản dựng tùy chỉnh. Chọn những cái phù hợp nhất với nhu cầu của bạn

Hỗ trợ ngôn ngữ postcss

Lưu ý rằng một số plugin yêu cầu các plugin khác hoạt động. Các phụ thuộc này được đề cập trong phần Yêu cầu plugin của hộp mô tả cho mỗi plugin. Nếu phần này không có, plugin không cần bất kỳ plugin nào khác để hoạt động

Một số plugin này là các tính năng cao cấp yêu cầu giấy phép bổ sung để chạy. Chúng được đánh dấu bằng huy hiệu Tính năng cao cấp phù hợp

Khi bạn đã chọn tất cả các plugin mong muốn, hãy nhấn nút Bước tiếp theo ở trên cùng bên phải

Bước tiếp theo cho phép bạn soạn thanh công cụ. Không gian làm việc kéo và thả đơn giản cho phép thêm các nút (đại diện cho các plugin đã chọn ở bước trước) vào thanh công cụ. Bạn cũng có thể thay đổi thứ tự của các nút và trình đơn thả xuống và nhóm chúng lại cho phù hợp. Lưu ý rằng trình tạo trực tuyến cũng cho phép bạn tạo bố cục thanh công cụ nhiều dòng — chỉ cần kéo bất kỳ nút nào bên dưới nút đã đặt để tạo một dòng thanh công cụ mới

Hỗ trợ ngôn ngữ postcss

Một số nút được đặt sẵn trên bố cục và do đó chuyển sang màu xám trong không gian làm việc với các mục trên thanh công cụ có sẵn. Nếu bạn muốn xóa bất kỳ nút nào khỏi thiết lập thanh công cụ của mình, hãy kéo chúng trở lại không gian làm việc phía trên

Sau khi thiết kế xong thanh công cụ, nhấn nút Bước tiếp theo trên cùng bên phải

Chọn ngôn ngữ mặc định

Cuộn danh sách các ngôn ngữ có sẵn và chọn ngôn ngữ bạn muốn làm ngôn ngữ chính cho bản dựng trình soạn thảo của mình

Hỗ trợ ngôn ngữ postcss

Tất cả các ngôn ngữ khác sẽ vẫn có sẵn trong thư mục 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
3

Tải xuống bản dựng tùy chỉnh

Điều này là đơn giản như nó được. chỉ cần nhấn nút Bắt đầu để tải xuống gói tùy chỉnh của bạn

Tham khảo phần Tiếp theo là gì?

Xây dựng trình chỉnh sửa từ nguồn

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 được giới thiệu trong đường dẫn trước, 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

Đây là một lộ trình nâng cao giả định rằng bạn đã quen thuộc với npm và dự án của bạn đã sử dụng npm. Nếu không, hãy xem tài liệu npm hoặc gọi 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
0 trong một thư mục trống và kiểm tra kết quả

Thiết lập môi trường

Trước khi chuyển sang tích hợp, bạn cần chuẩn bị ba tệp sẽ chứa mã được trình bày trong hướng dẫn này. Tạo các tệp 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
1, 
// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
2 và 
// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
3

Sau đó, cài đặt các gói cần thiết để xây dựng CKEditor 5

npm install --save \
    css-loader@5 \
    postcss-loader@4 \
    raw-loader@4 \
    style-loader@2 \
    webpack@5 \
    webpack-cli@4

Cấu hình webpack tối thiểu cần thiết để cho phép xây dựng CKEditor 5 là

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};

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

Tạo trình chỉnh sửa

Bây giờ bạn có thể cài đặt một số gói CKEditor 5 Framework sẽ cho phép bạn khởi chạy trình soạn thảo văn bản đa dạng thức đơn giản. Tuy nhiên, hãy nhớ rằng tất cả các gói (không bao gồm 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
4) phải có cùng phiên bản với gói trình chỉnh sửa cơ sở

Bạn có thể bắt đầu với trình chỉnh sửa cổ điển với một bộ tính năng nhỏ

"prettier.stylelintIntegration": true,
0

Dựa trên các gói này, bạn có thể tạo một ứng dụng đơn giản

Hướng dẫn này đang sử dụng cú pháp mô-đun ES6. Bạn nào chưa biết thì xem bài viết này

Lưu ý rằng trong hướng dẫn này, lớp soạn thảo được sử dụng trực tiếp (i. e. bạn sử dụng 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
5 thay vì 
// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
6)

Không có bản dựng trình soạn thảo được xác định trước nào được sử dụng, bởi vì việc thêm các plugin mới vào những bản dựng này yêu cầu phải xây dựng lại chúng. Điều này có thể được thực hiện bằng cách tùy chỉnh bản dựng hoặc bằng cách đưa nguồn CKEditor 5 vào ứng dụng của bạn (như trong hướng dẫn này)

"prettier.stylelintIntegration": true,
3

Bây giờ bạn có thể chạy webpack để xây dựng ứng dụng. Để làm điều đó, hãy gọi tệp thực thi 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
7

"prettier.stylelintIntegration": true,
5

Bạn cũng có thể cài đặt 

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
8 trên toàn cầu (sử dụng 
// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
9) và chạy nó thông qua một 
// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
7 có sẵn trên toàn cầu

Ngoài ra, bạn có thể thêm nó dưới dạng tập lệnh npm

"prettier.stylelintIntegration": true,
9

Và sử dụng nó với

"emmet.includeLanguages": {
    "postcss": "css"
  },
  "emmet.syntaxProfiles": {
    "postcss": "css"
  },
0

npm tự động thêm 

"prettier.stylelintIntegration": true,
01 vào 
"prettier.stylelintIntegration": true,
02, vì vậy trong trường hợp này, bạn không cần cài đặt 
// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
8 trên toàn cầu

Sử dụng 

"prettier.stylelintIntegration": true,
04 nếu bạn muốn xây dựng một ứng dụng được tối ưu hóa và tối ưu hóa. Tìm hiểu thêm về nó trong tài liệu webpack

Ghi chú. Trước phiên bản 1. 2. 7, 

"prettier.stylelintIntegration": true,
05 (công cụ khai thác mặc định được webpack sử dụng) có một lỗi khiến webpack gặp sự cố với lỗi sau. 
"prettier.stylelintIntegration": true,
06. Nếu bạn gặp phải lỗi này, hãy đảm bảo rằng 
"prettier.stylelintIntegration": true,
07 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)

Ghi chú. Bản dựng CKEditor 5 sử dụng 

"prettier.stylelintIntegration": true,
08 thay vì 
"prettier.stylelintIntegration": true,
05 vì bản dựng sau dường như không còn được hỗ trợ

Nếu mọi thứ hoạt động chính xác, bạn sẽ thấy

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
0

Chạy trình chỉnh sửa

Cuối cùng, đã đến lúc tạo một trang HTML

// webpack.config.js

'use strict';

const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // https://webpack.js.org/configuration/entry-context/
    entry: './app.js',

    // https://webpack.js.org/configuration/output/
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: styles.getPostCssConfig( {
                                themeImporter: {
                                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                                },
                                minify: true
                            } )
                        }
                    }
                ]
            }
        ]
    },

    // Useful for debugging.
    devtool: 'source-map',

    // By default webpack logs warnings if the bundle is bigger than 200kb.
    performance: { hints: false }
};
1

Mở trang này trong trình duyệt của bạn và bạn sẽ thấy trình chỉnh sửa WYSIWYG đơn giản được thiết lập và chạy. Đảm bảo kiểm tra bảng điều khiển trình duyệt trong trường hợp có gì đó không ổn

Hỗ trợ ngôn ngữ postcss

Chúng tôi khuyên bạn nên sử dụng trình kiểm tra CKEditor 5 chính thức để phát triển và gỡ lỗi. Nó sẽ cung cấp cho bạn vô số thông tin hữu ích về trạng thái của trình chỉnh sửa, chẳng hạn như cấu trúc dữ liệu bên trong, lựa chọn, lệnh, v.v.

Cái gì tiếp theo?

Xin chúc mừng, bạn vừa chạy phiên bản CKEditor 5 đầu tiên của mình. Bây giờ là lúc để tìm hiểu thêm về tùy chỉnh, vì vậy hãy chuyển thẳng đến hướng dẫn Cấu hình

P. S. Nếu bạn sử dụng Angular, React hoặc Vue. js và muốn tích hợp CKEditor 5 vào ứng dụng của mình, hãy tham khảo phần Frameworks

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 thông tin lỗi thời?

programming css

Bài Viết Liên Quan

Làm thế nào để bạn khai báo một danh sách kích thước cố định trong python?
Làm thế nào để bạn khai báo một danh sách kích thước cố định trong python?

Www.dut.ac.za ứng dụng trực tuyến 2023
Www.dut.ac.za ứng dụng trực tuyến 2023

Lịch sử của php w3schools
Lịch sử của php w3schools

Python viết lớp
Python viết lớp

Python ngày làm việc cuối cùng của tháng
Python ngày làm việc cuối cùng của tháng

Làm cách nào để có được tháng từ một ngày JavaScript?
Làm cách nào để có được tháng từ một ngày JavaScript?

Cách hiển thị hình ảnh nổi bật trong trang WordPress
Cách hiển thị hình ảnh nổi bật trong trang WordPress

Hà Lan Mỹ Alaska 2024
Hà Lan Mỹ Alaska 2024

Cách tạo hàm hủy trong PHP mcq
Cách tạo hàm hủy trong PHP mcq

Phân chia trong python có luôn trả về số float không?
Phân chia trong python có luôn trả về số float không?

MỚI CẬP NHẬP

Bài tập chữa thoát vị đĩa đệm l5s1 năm 2024
23 giâys trước . bởi Four-hourMajority
Vở bài tập toán lớp 5 trang 44 năm 2024
27 phúts trước . bởi AgelessWaistcoat
Máy ép trái cây tốc độ chậm loại nào tốt năm 2024
42 phúts trước . bởi AggressiveDollar
Bài tập giảm cân cấp tốc tại nhà năm 2024
57 phúts trước . bởi EcstaticComedian
Mã hóa câu hỏi nhiều lựa chọn trong excel năm 2024
1 giờs trước . bởi BaldingOnslaught
Bài viết số 3 đề 2 lớp 9 tập 1 năm 2024
1 giờs trước . bởi ShinyMantra
Giáo trình thanh toán quốc tế đinh xuân trình pdf năm 2024
2 giờs trước . bởi ChoppyBarrier
Luật an ninh mạng khi nào có hiệu lực năm 2024
2 giờs trước . bởi BusingInaccuracy
Giải bài 35 36 37 sgk toán 8 trang 87 năm 2024
2 giờs trước . bởi PredictedAllegiance
Nghề làm đẹp nào hot nhất hiện nay năm 2024
3 giờs trước . bởi FlabbergastedJuggernaut

Xem Nhiều

File kẹp tài liệu đục lỗ tiếng anh là gì năm 2024
3 ngàys trước . bởi InsidiousReceptor
Lỗi khi mở folder màn hình view bị thu nhỏ năm 2024
4 ngàys trước . bởi RegimentalAdoption
Viết bài văn nghị luận về bảo vệ môi trường năm 2024
2 ngàys trước . bởi RaspingPatchwork
Công văn sở giáo dục đào tạo tỉnh quảng ngãi năm 2024
1 ngàys trước . bởi DapperFoothold
Uống vitamin d vào lúc nào tốt nhất năm 2024
3 ngàys trước . bởi PrimordialHacker
Rách giời rơi xuống nghĩa là gì năm 2024
5 ngàys trước . bởi VastOrientation
Bài 35 sách giáo khoa toán 8 tập 1 năm 2024
22 giờs trước . bởi TenuousScenery
Lỗi không gõ được tiếng việt trên amis năm 2024
1 ngàys trước . bởi PonderousCivility
Những bài toán lớp 1 giúp trẻ tư duy năm 2024
2 ngàys trước . bởi AnnoyedWomanhood
Uống omega 3 6 9 vào lúc nào năm 2024
7 giờs trước . bởi HomogeneousLiner

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.