PHP: Добавление и сохранение данных CKEditor 5 в базу данных MySQL с помощью PHP

19/01/2023 18:42

CKEditor 5 - это текстовый редактор. Он обладает широким набором функций, которые призваны сделать работу пользователя как можно более приятной.

В этом учебнике я покажу, как можно инициализировать CKEditor 5 с загрузкой файла на элемент и сохранить его данные в базе данных MySQL с помощью PHP.

1. Структура таблицы

Я использую таблицу messages.

CREATE TABLE `messages` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `subject` varchar(80) NOT NULL,
  `message` TEXT NOT NULL
);

2. Конфигурация базы данных

Создайте файл config.php для конфигурации базы данных.

Готовый код

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

3. Загрузите и подключите CKEditor 5

Загрузите библиотеку CKEditor 5 отсюда или можете использовать CDN

<script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/classic/ckeditor.js"></script>

4. HTML и PHP

HTML

Создайте <form method="post" action="">. В <form> добавьте текстовое поле, текстовую область и кнопку отправки.

PHP

Если <form> отправлена, то прочитаем значения POST и присвоим их переменным. Если значения не пустые, то вставьте новую запись в таблицу messages.

Готовый код

<?php 
include "config.php";

// Вставка записи
if(isset($_POST['submit'])){

      $subject = $_POST['subject'];
      $message = $_POST['message'];

      if($subject != '' && $message != ''){

            mysqli_query($con, "INSERT INTO messages(subject,message) VALUES('".$subject."','".$message."') ");
            header('location: index.php');
      }
}

?>

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Добавление и сохранение данных CKEditor 5 в базу данных MySQL с помощью PHP</title>

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >

     <style type="text/css">
     .ck-editor__editable {
           min-height: 250px;
     }
     </style>

</head>
<body>

     <div class="container">
          <div class="row">
               <div class="col-md-8 mt-5" style="margin: 0 auto;">

                    <form method="post" action="">

                         <div class="form-group mb-4">

                               <label class="control-label col-sm-2" for="subject">Subject:</label>
                               <div class="col-sm-10">
                                     <input type="text" class="form-control" id="subject" placeholder="Enter Subject" name="subject" value="">
                               </div>

                         </div>

                         <div class="form-group mb-4">

                               <label class="control-label col-sm-2" for="message">Message:</label>
                               <div class="col-sm-10">
                                     <textarea class="form-control editor" name="message"></textarea>
                               </div>

                         </div>

                         <div class="form-group "> 
                               <div class="col-sm-offset-2 col-sm-10">
                                     <input type="submit" class="btn btn-info" name="submit" value="Submit">
                               </div>
                         </div>

                    </form>

               </div>

          </div>

     </div>

</body>
</html>

5. AJAX - загрузка файлов в CKEditor 5

Создадим файл ckfileupload.php для загрузки файлов через CKEditor. Также создадим папку uploads.

Получим доступ к файлу, используя имя upload.

Проверим, имеет ли файл действительное расширение или нет. Если он действителен, то загрузим файл в папку uploads и сохраним некоторые данные для ответа CKEditor в массиве $data. Передадим $filename в $data['fileName'], 1 в $data['uploaded'], а $location в $data['url'].

Если файл не загружен, передадим 0 в $data['uploaded'] и сообщение об ошибке в $data['error']['message'].

Вернем массив $data в формате JSON.

Готовый код

<?php

$data = array();
if(isset($_FILES['upload']['name'])){
      // имя файла
      $filename = $_FILES['upload']['name'];

      // Положение
      $location = 'uploads/'.$filename;

      // расширение файла
      $file_extension = pathinfo($location, PATHINFO_EXTENSION);
      $file_extension = strtolower($file_extension);

      // Допустимые расширения
      $valid_ext = array("jpg","png","jpeg");

      if(in_array($file_extension,$valid_ext)){ 
            // Загрузка файла
            if(move_uploaded_file($_FILES['upload']['tmp_name'],$location)){
                  $data['fileName'] = $filename;
                  $data['uploaded'] = 1;
                  $data['url'] = $location;
            } 
      }else{
            $data['uploaded'] = 0;
            $data['error']['message'] = 'File not uploaded.'; 
      }

}else{
     $data['uploaded'] = 0;
     $data['error']['message'] = 'File not uploaded.'; 
}

echo json_encode($data);
die;

6. jаvascript

Инициализируем CKEditor на классе .editor. С помощью ckfinder установим URL-адрес загружаемого файла. Укажим URL в uploadURL. Я задал его как ckfileupload.php.

Готовый код

ClassicEditor
    .create( document.querySelector( '.editor' ),{ 
          ckfinder: {
                uploadUrl: "ckfileupload.php",
          }
    } )
    .then( editor => {
          console.log( editor );
    } )
    .catch( error => {
          console.error( error );
    } );

Чтобы отобразить на странице сохраненные в базе данных CKEditor данные, достаточно непосредственно присвоить их элементу textarea и инициализировать CKEditor. Содержимое будет автоматически отформатировано.

Скачать: add-and-save-ckeditor-5-data-to-mysql-database-with-.zip [2.78 Kb] (cкачиваний: 4)

PHP

1 + 0 -

MakeCodes
0
375