Add Ckeditor 5 + Ckfinder 3 to Website PHP + React

Ở bài viết trước mình đã kết hợp Ckeditor 5 + Ckfinder 3 trong website php rồi, nay mình tích hợp React làm front-end , bạn xem lại bài viết trước và download source trên github về nhé, tại phần này, mình sẽ tạo thư mục react trong project trước

ADD CKEDITOR 5 + CKFINDER 3 TO WEBSITE PHP

Github Full:Ckeditor 5 + Ckfinder 3 [PHP + React]

Sau khi bạn git clone soure trước về, ta tiến hành cài đặt react trong thư mục đó như sau:

# Cài đặt thư viện ckeditor5 trong React

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Bạn có thể xem thêm tại trang chủ ở đây: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/react.html

# Chỉnh sửa tập tin App.js trong thư mục client/src của ta

Thư mục client chính là thư mục react mà ta vừa download ở hình bên trên

import logo from './logo.svg';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
console.log(ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ))
function App() {
  return (
    <div className="App">
       <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    config={{
                        ckfinder: {
                            // Upload the images to the server using the CKFinder QuickUpload command.
                            uploadUrl: '/ckeditor5-ckfinder3-react-php/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
                            // Define the CKFinder configuration (if necessary).
                            options: {
                                resourceType: 'Images'
                            }
                        },
              
                      toolbar: [ 'Essentials', 'CKFinderUploadAdapter', 'Autoformat', 'Bold', 'Italic', 'BlockQuote', 'CKBox', 'CKFinder', 'CloudServices', 'EasyImage', 'Heading', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'Indent', 'Link', 'List', 'MediaEmbed', 'Paragraph', 'PasteFromOffice', 'PictureEditing', 'Table', 'TableToolbar', 'TextTransformation' ],
                      heading: {
                          options: [
                              { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                              { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                              { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
                          ]
                      }
                    }}
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                    onBlur={ ( event, editor ) => {
                        console.log( 'Blur.', editor );
                    } }
                    onFocus={ ( event, editor ) => {
                        console.log( 'Focus.', editor );
                    } }
                />
    </div>
  );
}

export default App;

Đoạn code bên trên ta cần import thư viện của ckedtor5 vào file để sử dụng nhé

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

Chú ý ở bần config ckfinder trong file trên, ta cần gọi cung cấp url trỏ tới ckfinder của ta trong thư mục project nhé

ckfinder: {
           // Upload the images to the server using the CKFinder QuickUpload command.
           uploadUrl: '/ckeditor5-ckfinder3-react-php/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
           // Define the CKFinder configuration (if necessary).
         options: {
                                resourceType: 'Images'
       }
  },

Sẽ có nhiều bạn sẽ hỏi, ủa mình để đường dẫn uploadUrl trên như thế, nó mặc định sẽ nhận đường dẫn của react http://localhost:3000 của ta rồi , sao hoạt động được

Okay, đễ giải quyết vấn đề trên ta cần chỉnh sửa proxy cho react thôi,

Hãy mỏ tập tin package.json trong project của react thêm đoạn code sao, nó sẽ trỏ tới đường dẫn backend có chứa thư mục ckfinder

"proxy": "http://localhost",
  "secure": false

File package.json

{
  "name": "client",
  "homepage": "http://localhost/ckeditor5-ckfinder3-react-php/admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost",
  "secure": false
}

Okay, bây giờ bạn có thể chạy npm start được rồi

Nhưng có một điều, bạn chỉ upload được hình thôi, chứ không thể mở ckfinder manager để chọn hình được,

Để làm được điều đó, bạn phải add đường dẫn trỏ tới file ckfinder.js trong file public/index.html của project react

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="http://localhost/ckeditor5-ckfinder3-react-php/ckfinder/ckfinder.js"></script>
    
  </body>
</html>

Cuối cùng để nó hoàn thiện ,ta cần build nó ra và upload đến thư mục mà ta đã cấu hình trên website.

Chú ý ở "homepage" trong package.json của React nhé, nó là nơi ta cấu hình router của react, ta chỉ việc copy file của react khi build thành công vào là được, để bạn mới có thể sài ckeditor5+ckfinder3 trong React đầy đủ tính năng

npm run build

Chạy lệnh trên ta sẽ có thư mục build, chứa các file mà react đã biên dịch cho ta, ta chỉ việc copy tất cả file đó, để đến thư mục ta cần dùng là được!

Bài Viết Liên Quan

x

Xin chào! Hãy ủng hộ chúng tôi bằng cách nhấp vào quảng cáo trên trang web. Việc này giúp chúng tôi có kinh phí để duy trì và phát triển website ngày một tốt hơn. (Hello! Please support us by clicking on the ads on this site. Your clicks provide us with the funds needed to maintain and improve the website continuously.)

Ngoài ra, hãy đăng ký kênh YouTube của chúng tôi để không bỏ lỡ những nội dung hữu ích! (Also, subscribe to our YouTube channel to stay updated with valuable content!)

Đăng Ký