1. Giải thuật sắp xếp số tăng dần-tìm số lớn nhất-xóa phần tử trùng nhau trong PHP
  2. Hướng dẫn kết nối Mysql trong Nodejs
  3. Hướng dẫn tạo Captcha
  4. Hướng dẫn tạo Form Hổ trợ trực tuyến phần 1
  5. Hướng dẫn tạo Form đăng ký thành viên
  6. Hướng dẫn tạo Form đăng nhập hệ thống kết hợp với CSDL
  7. Insert,Update,Delete bằng hướng đối tượng php (phần 1)
  8. insert-update-delete Mysql bằng Nodejs
  9. Register Angularjs and Php
  10. Login remember me Angularjs and Php
  11. Login Remember bằng Php
  12. Tìm kiếm phần tử trong mảng bằng PHP
  13. Tạo giỏ hàng theo mô hình MVC
  14. Login Google using PHP
  15. Upload Image Resize in PHP
  16. Add Ckeditor 5 + Ckfinder 3 to Website Php
  17. Add Ckeditor 5 + Ckfinder 3 to Website PHP + React
  18. Crawler Content after then Insert a Class to Image Url using PHP

Add Ckeditor 5 + Ckfinder 3 to Website Php

min read
Tags: 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é!

Tags: PHP
x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)