CodeIgniter 4: Как интегрировать редактор CKEditor (WYSIWYG) в приложение
![](/uploads/posts/2022-09/1664480219_codeigniter-4.webp)
В этой статье мы рассмотрим концепцию, "как интегрировать редактор Ckeditor в приложение CodeIgniter 4". Статья содержит закрытую информацию о том, как установить и использовать Ckeditor в CodeIgniter 4.
Если вы ищете решение, как установить и интегрировать CKEditor (WYSIWYG) в CodeIgniter 4, то эта статья поможет вам в этом. Туториал очень прост для понимания и внедрения в ваш код.
CKEditor - это текстовый редактор WYSIWYG, который позволяет писать контент непосредственно внутри веб-страниц или онлайн-приложений.
Установка CodeIgniter 4
Для создания установки CodeIgniter 4 выполните данную команду в оболочке или терминале. Убедитесь, что composer должен быть установлен.
$ composer create-project codeigniter4/appstarter codeigniter-4
Предположим, что вы успешно установили приложение в локальную систему.
Настройка окружения (.env)
Когда мы устанавливаем CodeIgniter 4, у нас будет файл env в корне. Чтобы использовать переменные окружения, то есть использовать переменные в глобальной области видимости, нам нужно переименовать env в .env.
Также это можно сделать с помощью команды терминала.
Откройте проект в терминале и введите команду:
$ cp env .env
Вышеприведенная команда создаст копию файла env в файл .env. Теперь мы готовы к использованию переменных окружения.
Включите режим разработки
CodeIgniter по умолчанию запускается в режиме "production". Вам необходимо перевести его в режим "development", чтобы увидеть любую ошибку, если вы работаете с приложением.
Откройте файл .env из корневой папки.
Найдите:
# CI_ENVIRONMENT = production
и замените на:
CI_ENVIRONMENT = development
Теперь приложение находится в режиме разработки.
Создание базы данных
Чтобы создать базу данных, мы можем создать ее либо с помощью ручного инструмента PhpMyadmin, либо с помощью команды mysql.
Мы будем использовать команду MySQL для создания базы данных. Выполните эту команду на вкладке Sql в PhpMyAdmin.
CREATE DATABASE codeigniter4_app;
Мы успешно создали базу данных.
Подключение к базе данных
Откройте файл .env из корня проекта.
Найдите раздел DATABASE. В нем вы должны увидеть переменные среды подключения. Вставьте обновленные данные строки подключения к базе данных.
.env
#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------
database.default.hostname = localhost
database.default.database = codeigniter4_app
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi
database.default.DBPrefix =
Теперь база данных успешно подключилась к приложению.
Создайте миграцию
Откройте проект в терминале и выполните эту команду для создания файла миграции.
$ php spark make:migration add_blogs
Это создаст файл -
- Файл миграции - 2022-09-07-031252_AddBlogs.php внутри папки /app/Database/Migrations.
Откройте файл миграции и запишите в него этот код.
<?php
namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class AddBlogs extends Migration
{
public function up()
{
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 5,
'unsigned' => true,
'auto_increment' => true,
],
'title' => [
'type' => 'VARCHAR',
'constraint' => 50,
'null' => false
],
'author_name' => [
'type' => 'VARCHAR',
'constraint' => 150,
'null' => false
],
'description' => [
'type' => 'TEXT',
'null' => true
]
]);
$this->forge->addPrimaryKey('id');
$this->forge->createTable('blogs');
}
public function down()
{
$this->forge->dropTable('blogs');
}
}
Запустите миграцию
Нам нужно создать таблицу в базе данных.
$ php spark migrate
Эта команда создаст таблицу - blogs в базе данных.
Создайте модель и контроллер
Далее, нам нужно создать модель и файл контроллера.
Файл модели
$ php spark make:model Blog
Эта команда создаст модель Blog.php внутри папки /app/Models.
Откройте файл Blog.php и запишите в него этот код.
<?php
namespace App\Models;
use CodeIgniter\Model;
class Blog extends Model
{
protected $DBGroup = 'default';
protected $table = 'blogs';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $insertID = 0;
protected $returnType = 'array';
protected $useSoftDelete = false;
protected $protectFields = true;
protected $allowedFields = [
"title",
"author_name",
"description"
];
// Dates
protected $useTimestamps = false;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';
// Validation
protected $validationRules = [];
protected $validationmessages = [];
protected $skipValidation = false;
protected $cleanValidationRules = true;
// Callbacks
protected $allowCallbacks = true;
protected $beforeInsert = [];
protected $afterInsert = [];
protected $beforeUpdate = [];
protected $afterUpdate = [];
protected $beforeFind = [];
protected $afterFind = [];
protected $beforeDelete = [];
protected $afterDelete = [];
}
Файл контроллера
Чтобы создать контроллер, выполните эту команду.
$ php spark make:controller BlogController
Команда создаст файл BlogController.php внутри папки /app/Controllers.
Откройте файл BlogController.php и запишите в него код.
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\Blog;
class BlogController extends BaseController
{
public function index()
{
return view('blog-form');
}
public function submitData()
{
$input = $this->request->getVar();
$blogObject = new Blog();
$data = [
'title' => $input['title'],
'author_name' => $input['author_name'],
'description' => $input['description']
];
$blogObject->insert($data);
$session = session();
$session->setFlashdata('success', 'Data saved successfully!');
return redirect()->to('form');
}
}
Создайте файл шаблона
Перейдите в папку /app/Views и создайте файл с именем blog-form.php
Откройте файл blog-form.php и запишите в него код.
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 20px;">
<div class="row">
<div class="col-md-12">
<?php if (session()->getFlashdata('success')) { ?>
<div class="alert alert-success">
<?php echo session()->getFlashdata('success'); ?>
</div>
<?php } ?>
<h4 class="text-center">CodeIgniter 4 Integrate Ckeditor Example Tutorial</h4><br>
<form method="post" action="<?php echo site_url('submit-data') ?>" class="form form-horizontal">
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control" />
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" id="description-ckeditor" name="description"></textarea>
</div>
<div class="form-group">
<label>Author Name</label>
<input type="text" name="author_name" class="form-control" />
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace('description-ckeditor');
</script>
</body>
</html>
Добавьте маршрут
Откройте файл Routes.php из папки /app/Config и добавьте в него эти маршруты.
$routes->get("form", "BlogController::index");
$routes->post("submit-data", "BlogController::submitData");
Тестирование приложения
Откройте терминал проекта и запустите сервер разработки с помощью команды:
$ php spark serve
URL: http://localhost:8080/form
Введите значения в форму
Нажмите на кнопку Отправить, чтобы сохранить данные формы
Вы должны увидеть данные, сохраненные в таблице blogs.
Надеюсь, что эта статья помогла вам изучить "CodeIgniter 4: Как интегрировать редактор CKEditor (WYSIWYG) в приложение" очень подробно.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.