CodeIgniter 4: Как использовать Froala WYSIWYG HTML Editor в CodeIgniter 4

04/09/2022 15:50

В этом руководстве мы рассмотрим концепцию, как использовать Froala WYSIWYG HTML-редактор в CodeIgniter 4. Руководство содержит закрытую информацию об использовании Froala WYSIWYG HTML Editor.

Если вы ищете решение, как интегрировать Froala WYSIWYG Editor в CodeIgniter, то это статья поможет вам в этом. Руководство очень простое для понимания и внедрения в ваш код.

Froala (WYSIWYG Editor) - один из самых мощных текстовых редакторов на jаvascript во всех аспектах. Он разработан с учетом производительности и выдерживает самые строгие испытания.

Давайте начнем.

Установка 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

Теперь приложение находится в режиме разработки.

Создайте контроллер

Откройте проект в терминале и выполните эту команду для создания файла контроллера.

$ php spark make:controller EditorController

Он создаст файл EditorController.php внутри папки /app/Controllers.

Откройте этот файл контроллера и запишите в него этот код.

EditorController.php

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class EditorController extends BaseController
{
	public function index()
	{
		return view("editor");
	}

	public function formData()
	{
		if ($this->request->getMethod() == "post") {
			echo "<pre>";
			print_r($this->request->getVar());
		}
	}
}

Создание шаблона представления

Далее, мы будем использовать файлы плагинов Froala (CSS, JS), чтобы добавить Froala WYSIWYG HTML Editor в шаблон страницы.

Создайте файл editor.php в папке /app/Views. Откройте файл editor.php и напишите в нем следующий код.

editor.php

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How To Use Froala WYSIWYG HTML Editor in CodeIgniter 4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_editor.pkgd.min.css">
</head>

<body>
    <div class="container">

        <h4>How To Use Froala WYSIWYG HTML Editor in CodeIgniter 4</h4>

        <div class="panel panel-primary">
            <div class="panel-heading">How To Use Froala WYSIWYG HTML Editor in CodeIgniter 4</div>
            <div class="panel-body">
                <form action="<?php echo site_url('submit-form') ?>" method="POST">
                    <div class="mt-3">
                        <label>Title:</label>
                        <input type="text" name="title" class="form-control" placeholder="Title">
                    </div>
                    <br />
                    <div class="mt-3">
                        <label>Description:</label>
                        <textarea id="description" name="description" class="form-control" rows="3" placeholder="description" required></textarea>
                    </div>
                    <br />
                    <button type="submit" name="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/froala_editor.pkgd.min.js"></script>
<script>
    $(document).ready(function() {
        var editor = new FroalaEditor('#description');
    });
</script>

</html>

Добавьте маршрут

Откройте файл Routes.php из папки /Config. Добавьте в него эти маршруты.

Routes.php

$routes->get("editor", "EditorController::index");
$routes->post("submit-form", "EditorController::formData");

Тестирование

Запустите сервер разработки:

$ php spark serve

URL: http://localhost:8080/editor

Когда вы отправите данные с помощью этого редактора, вы получите все данные из редактора Froala в атрибуте name элемента ввода, который вы связали.

Надеемся, что это руководство очень подробно помогло вам изучить как использовать WYSIWYG HTML-редактор Froala в CodeIgniter 4.

Codeigniter

1 + 0 -

MakeCodes
0
497