Add Ckeditor 5 + Ckfinder 3 to Website Php

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é!

Bài Viết Liên Quan

Bình Luận