Chào các bạn, ở bài viết trước chúng ta cũng đã có cái nhìn sơ lược về CKEditor 5 cũng như các tính năng mới mẻ mà CKEditor 5 mang lại trong quá trình sử dụng. Trong bài viết này, chúng ta cùng nhau cấu hình một bản CKEditor 5 phù hợp cho nhu cầu sử dụng
Lần này mình sẽ cấu hình một editor sử dụng NPM và webpack
Tạo thư mục
Đầu tiên chúng sẽ tạo thư mục chứa project
mkdir ckeditor-build // Tạo thư mục
cd ckeditor-build // Di chuyển vào bên trong thư mục
Để quản lý các module của bên thứ 3, chúng ta cần tạo file package.json
Để tạo file package.json chúng ta làm như sau
npm init -y // Tạo nhanh File package.json với các giá trị default
Cấu trúc thư mục của chúng ta như sau:
├── sample
│ └── index.html // Test CKEdtior
├── src
│ └── ckeditor.js // Build CKeditor
├── package-lock.json
├── package.json
└── webpack.config.js // Cấu hình webpack
Cấu hình webpack
Download các plugin phục vụ cho quá trình bundle file bằng webpack
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@3 \
style-loader@1 \
webpack@4 \
webpack-cli@3 \
Nội dung file webpack.config.js
'use strict';
const path = require( 'path' );
const webpack = require( 'webpack' );
const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
module.exports = {
devtool: 'source-map',
performance: { hints: false },
entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),
output: {
library: 'ClassicEditor',
path: path.resolve( __dirname, 'build' ),
filename: 'ckeditor.js',
libraryTarget: 'umd',
libraryExport: 'default'
},
plugins: [
new CKEditorWebpackPlugin( {
language: 'en',
additionalLanguages: 'all'
} ),
new webpack.BannerPlugin( {
banner: bundler.getLicenseBanner(),
raw: true
} )
],
module: {
rules: [
{
test: /\.svg$/,
use: [ 'raw-loader' ]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
]
}
]
}
};
Cấu hình CKEditor
Bây giờ chúng ta sẽ cài đặt một số plugin của CKEditor 5
npm install --save \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-theme-lark \
@ckeditor/ckeditor5-heading \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-link \
@ckeditor/ckeditor5-list \
@ckeditor/ckeditor5-block-quote \
@ckeditor/ckeditor5-image \
@ckeditor/ckeditor5-table \
Trình editor mình lựa chọn cài đặt ở đây là Classic Editor
Ngoài ra còn có một số plugin khác như : heading (h1, h2), basic style (in đậm, in nghiêng chữ), link, danh sách ul, ol, quote, hình ảnh, bảng biểu
Sau khi download xong các plugin cần thiết, tiếp đó chúng ta sẽ tiến hành setup editor trong file src/ckeditor.js
// src/ckeditor.js
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
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 Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
export default class ClassicEditor extends ClassicEditorBase {}
// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
Heading,
Bold,
Italic,
BlockQuote,
Link,
List,
Table,
TableToolbar,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
ImageInsert,
];
// Editor configuration.
ClassicEditor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'|',
'blockQuote',
'link',
'|',
'bulletedList',
'numberedList',
'|',
'insertTable',
'insertImage',
'|',
'undo',
'redo',
],
},
};
Cuối cùng chúng ta chạy câu lệnh sau để tiến hành bundle file
npm run build
Sau khi chạy xong câu lệnh trên, lúc này trong project sẽ xuất hiện thư mục build, chúng ta sẽ sử dụng file ckeditor.js trong thư mục này để test ckeditor vừa được build
Test CKEditor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5</title>
</head>
<body>
<h1>CKEditor 5 – Classic editor build</h1>
<div id="editor"></div>
<script src="../build/ckeditor.js"></script>
<script>
ClassicEditor.create(document.querySelector('#editor'), {
placeholder: 'Type the content here!',
})
.then(editor => {
console.log(editor)
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
Ở trên thì mình đã tạo ra 1 file html sử dụng file ckeditor.js trong thư mục build
Tiếp theo chúng ta sẽ tạo ra một instance của Classic Editor bằng phương thức create()
Và đây là Classic Editor khi chúng ta khởi tạo thành công
Bình luận