Mấy ngày này mình tìm hiểu về cách tích hợp ckeditor5 + ckfinder đến website của mình, cũng khó khăn vãi chưỡng, nhưng nay mình làm được rồi, cũng chia sẻ với mọi người cách tích hợp như sau:
Github: Ckeditor 5 + Ckfinder3
# Tạo project ckeditor 5 của bạn và cài đặt như sau:
npm init
npm install --save @ckeditor/ckeditor5-build-classic# Tiếp theo hãy download ckfinder 3 về máy , nhớ chọn ckfinder đúng phiên bản php mà bạn đang dùng nhé:
Ví dụ : php bạn đang dùng là php 7, thì tải ckfinder 3.4.3, còn php 8=>ckfinder 3.5.3
Bạn có thể vào link dưới đây để tại : https://ckeditor.com/ckfinder/download/
Sau khi tải ckfinder về giải nén nó vào thư mục của bạn
# Tạo file index.html hay index.php cũng được trong thư mục project của bạn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script> -->
<script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body >
<div id="editor" ></div>
<script type="text/javascript">
ClassicEditor.create(document.querySelector('#editor'), {
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
// Define the CKFinder configuration (if necessary).
options: {
resourceType: 'Images'
}
},
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'subscript',
'superscript',
'alignment',
'|',
'fontFamily',
'fontSize',
'fontColor',
'fontBackgroundColor',
'highlight',
'|',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'link',
'imageInsert',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'code',
'specialCharacters',
'|',
'undo',
'redo',
'|',
'CKFinder'
],
shouldNotGroupWhenFull: true,
},
language: 'en',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
})
.then(editor => {
window.editor = editor;
CKFinder.setupCKEditor(editor);
console.log( Array.from( editor.ui.componentFactory.names() ) );
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html># Các bạn nhìn bên trên ta có thẻ <div id="editor"></div> dùng để load ckeditor của ta ra
Để show các thanh công cụ của toolbar ra thì các bạn có thể tìm hiểu thêm tại trang : https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html
# Cấu hình ckfinder 3 của ta như sau
Nói chung thì ta chỉ cấu hình đường dẫn và bảo mật thôi, mở file config.php trong ckfinder của ta lên và chỉnh nhé,
$config['authentication'] = function () {
return true;
};
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => 'http://localhost/TestCkeditor/upload/',
// 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);Bên trên mà ta thường hay cấu hình như vậy, tuy vào cách của mọi người nhé!