Гость

Нажмите для авторизации/регистрации

  • Назад
  • Меню
  • Статьи
    • Все
    • Интернет и технологии
    • Laravel и WebDev
    • Linux, Windows, Docker, Etc
    • Новости
    • Прочее
    • Геймдев
  • Информация
    • Оферта на дополнительные функции
    • Политика конфиденциальности
    • Тарифы
    • Пользовательское соглашение

Laravel + TinyMCE

  1. Главная
  2. Статьи
  3. Laravel и WebDev
  4. Laravel + TinyMCE
Laravel + TinyMCE
  • 02/12/2021
  • Chebukin Pavel
  • 361 просмотров
  • 0 комментариев

Laravel + TinyMCE

Какой сайт сейчас может обойтись без редактора? Да, можно добавить поля типа file и загружать. Но когда в материале нужен целых несколько картинок, то это неудобно и не технологично. Но чтобы редактор умел загружать картинку, как редактор должен знать как ее отправить, так и серверная часть знать то, как ее получить, сохранить и вернуть на нее ссылку. Этим и займемся.

Я уже писал о методе бесплатной загрузки картинок в редакторе CKEditor 4. Там же я упоминал что опишу метод загрузки картинок с редактором TinyMCE. Вот в этом материале об этом и будет речь. Для обоих вариантов, что непосредственно установленный на сайте и подключаемый с него, что редактор с облачной загрузкой, серверная часть особо не отличается и в этом примере я покажу именно версию с подгружаемым редактором.

Шаг 1: Идем на сайт TinyMCE

Сам сайт. Регистрируемся. Подтверждаем аккаунт через почту и авторизуемся. Видим перед собой Панель пользователя, с ключом для API.

Шаг 2: Установка редактора на страницу

Вот в синем поле код и есть подключение на страницу. Из него строку:

<script src="https://cdn.tiny.cloud/1/XXXXXXXXXXXXXXXXXXXXXXXXXX/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

Вставляем в шапку, а лучше перед закрывающим тегом </body>. В этой строке, вместо XXXXXXXXXXXXXXXXXXXXXXXXXX должен быть ваш уникальный ключ.

Вторая часть скрипта - запуск самого редактора, немного модифицируем:

<script>
document.addEventListener('DOMContentLoaded', function(){
    tinymce.init({
      selector: 'textarea',
      plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      toolbar_mode: 'floating',
    });
});
</script>

Этот код цепляет редакторы на все элементы textarea на странице. А выполнение скрипта мы обернули в обработчик события, которое наступит после загрузки страницы. Таким образом загрузится вся страница и после уже инициализируется сам редактор.

Но и это еще не все. Для того чтобы редактор подгрузился, он должен быть на разрешенном домене. Для этого идем на вкладку, в меню слева - Approved Domains и в поле вводим домен, на котором сайт работает. Вы можете внести несколько доменов. Введя домен жмем кнопку ADD. Как видим, в списке уже добавлен домен localhost, на тот случай если вы разрабатываете сайт локально. В этом случае добавлять сайт не нужно. Но для каждого домена где отображается редактор должен быть введен домен. В противном случае редактор не загрузится.

То есть, в самом простом виде ваша страница должна выглядеть так:

<html>
<head>
<title>TinyMCE Example</title>
</head>
<body>

<textarea name="body" rows="6"></textarea>

<script src="https://cdn.tiny.cloud/1/XXXXXXXXXXXXXXXXXXXXXXXXXX/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
    tinymce.init({
      selector: 'textarea',
      plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      toolbar_mode: 'floating',
    });
});
</script>
</body>
</html>

Когда мы закончили с подключением редактора на страницу, переходим к загрузке фото из него. 

Шаг 3: Вносим правки в код инициализации редактора

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

<script>tinymce.init({
        width : "100%",
//здесь добавили возможность не подключать редактор на элементы с классом mceNoEditor
        selector: 'textarea:not(.mceNoEditor)',
//подключили русский язык
        language:"ru",
//я замени идущие полным набором расширения на меньшее количество версий
        //plugins: 'a11ychecker advcode casechange quickbars formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker image code fullscreen',
//и настроил панель по своему
        //toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table blockquote numlist bullist fullscreen',
        plugins: 'quickbars autolink lists media image code fullscreen  link',
        toolbar: 'code formatpainter table blockquote numlist bullist fullscreen link unlink removeformat',
        toolbar_mode: 'floating',
        tinycomments_mode: 'embedded',
        //toolbar: false,
        menubar: false,
        //inline: true,
        tinycomments_author: 'guest',
//        images_upload_url: 'postAcceptor.php',
        //automatic_uploads: false,
//вместо отправки в файл, добавим свой обработчик загрузки
        images_upload_handler: function (blobInfo, success, failure) {
//методом JavaScript создаем форму
            var xhr, formData;
//создаем обьект отправки запроса аяксом
            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
//указываем ему action на нужную нам ссылку
            xhr.open('POST', '/uploader/tiny');
//подставляем csrf токен в заголовок, чтобы сайт не выбивал нам ошибку об устаревшей форме
//или запрете ее отправки
            var token = '{{ csrf_token() }}';
            xhr.setRequestHeader("X-CSRF-Token", token);
            xhr.onload = function() {
//в этой функции обаботка ошибки
                var json;
                if (xhr.status != 200) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);

                if (!json || typeof json.location != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
//в противном случае вызываем калбек успеха
                success(json.location);
            };
//создаем отправлямые данные формы
            formData = new FormData();
//добавляем к ней поле с нашим файлом
            formData.append('file', blobInfo.blob(), blobInfo.filename());
//отправляем
            xhr.send(formData);
        }
    });</script>

Максимально сколько мог и считал нужным, описал комментариями код обработки загрузки файла на сервер. Теперь очередь добавить обработку на сторону Laravel.

Шаг 4: Контроллер обработки загрузки файла на Laravel, а так же роутинг

Идем в папку Laravel, в консоли и выполняем команду добавления контроллера:

php artisan make:controller Fileuploader

После выполнения, создастся файл контроллера в папке app\Http\Controllers, в него добавляем обработку загрузки файла:

<?php namespace App\Http\Controllers;

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Request;


class Fileuploader extends Controller {

    public function uploadTiny(Request  $request){
//если установлен плагин DebugBar, функция ниже его отключает для запроса
        app('debugbar')->disable();
//проверяем загружается ли файл с названием file
        if (\request()->file('file',false)){
//получаем расширение файла
            $fileFormat = \request()->file('file')->getClientOriginalExtension();
//проверяем на допустимый формат
            $PhotoValidFormat = array('jpg', 'png', 'gif', 'jpeg', 'bmp');
//проверяем есть ли ошибка при загрузке файла
            if (in_array(strtolower($fileFormat), $PhotoValidFormat) && $_FILES['file']['error'] === UPLOAD_ERR_OK) {
//создаем новое имя для файла
                $PhotoName = uniqid() . '.' . \request()->file('file')->getClientOriginalExtension();
//получаем и проверяем размер файла
                $fileSize = number_format($_FILES['file']['size'] / 1048576, 2);//to mb
                if ($fileSize <= 50) {
//если размер допустимый, перемещаем файл в папку uploaded
//не забудьте ее создать, а так же прописать путь в файле config/filesystems.php,
//в моем случае это подобного вида:
//'uploaded' => [
//            'driver' => 'local',
//            'root'   => storage_path().'/public/images/uploaded',
//        ],
//перемещаем файл и проверяем перемещение на успешность
                    if ( \request()->file('file')->move(storage_path('uploaded'), $PhotoName)) {
                        return json_encode(array(
                            'location'=>env('APP_URL').'/storage/uploaded/'.$PhotoName
                        ));
                    } else
                        $res = -1;
                } //bad format or size not allowed for php.ini
                else {
                    if (isset($_FILES['file']['error']) && $_FILES['file']['error'] == 1)
                        $res = -1;
                    else
                        $res = 0;
                }
//возвращаем в обработчик нужный формат ответа
                echo json_encode(array('res' => $res));
            }
        }
    }

}

Да, кто-то вполне корректно может заметить что можно использовать функции фреймворка и код изящнее, но я добавлял этот код давно и он просто работает, а времени на переписывание конкретно этого куска у меня нет. Так что, если кто-то желает, может загрузить свой материал или написать функцию в комментариях. А мы двигаемся дальше.

Нужно добавить роутинг. В файл routes/web.php добавляем строки:

Route::group(['prefix'=>'uploader'],function(){
    Route::match(['get','post'],'/tiny',[\App\Http\Controllers\Fileuploader::class,'uploadTiny']);
});

Результат теперь виден  в редакторе 

Собственно на этом все.

Отзывы

Пока нет комментариев


Для того чтобы оставить комментарий, авторизуйтесь.
Понравился материал? Поделись!
Laravel, подключаем комментарии Disqus на сайт
Дек11
Laravel, подключаем комментарии Disqus на сайт

Ранее я уже писал о том, как добавить комментарии Facebook на сайт. В этом материале мы добавим альтернативные комментарии, от сервиса Disqus.  Комментарии на сайт встроенные лучше, чем подключаемые. Но требуют разработки, внедрения, модерации и т.д. Все это время и ресурсы. Но такие комментарии будут работать быстрее даже. Не всем...

  • Chebukin Pavel
  • 0
  • 11.12.2021 18:29
Проблема с просмотром больших XML/YML файлов?
Ноя28
Проблема с просмотром больших XML/YML файлов?

Вы, как и я, столкнулись со сложностью того, что сайт через API отдает большой XML файл? Хорошо когда есть документация, но часто ее нет, или она не полная, или вообще не актуальная. Нужно посмотреть что внутри файла. И вот тут сталкиваемся со сложностью, большая часть редакторов кода и текстовых редакторов...

  • Chebukin Pavel
  • 0
  • 28.11.2021 23:24
Лучшие редакторы и среды разработки для разработчиков
Дек18
Лучшие редакторы и среды разработки для разработчиков

Выбор лучшего редактора и IDE Холивары между тем лучшим ли является для разработки Emacs или Vi(m) потихоньку отходят в прошлое. Уже сложно их представить полноценными средами разработки. Ведь несмотря на всю их практичность, соревноваться в удобстве с современными комбайнами они могут только при крайне длительной подготовке. Но чтобы выбрать лучший для себя...

  • Chebukin Pavel
  • 0
  • 18.12.2021 20:32
Фотостоки и банки картинок с бесплатными тарифами
Ноя28
Фотостоки и банки картинок с бесплатными тарифами

Разрабатывая проект себе, или небольшому заказчику, сложно позволить себе значимые суммы денег в затратах. До выхода проекта в плюс, часто идет очень не мало временных и интеллектуальных, а так же финансовых затрат. Позволить себе оплату на таких сервисах как Envato Elements сложно. Хотя некоторое время я использовал их подписку и...

  • Chebukin Pavel
  • 0
  • 28.11.2021 21:27
Простой LazyLoad для сайта на Laravel и не только
Ноя25
Простой LazyLoad для сайта на Laravel и не только

Что такое LazyLoad? Суть метода LazyLoad - подгружать картинки не в момент загрузки страницы, а по мере ее просмотра. Это облегчает первоначальную загрузку страницы, скорость отображения пользователям и отношение поисковых систем. На многих своих сайтах я использую LazyLoad картинок, для ускорения загрузки самого сайта. Сделать это легко. Заходим на сайт...

  • Chebukin Pavel
  • 0
  • 25.11.2021 23:30
Создаем канал в Telegram и отправляем в него сообщение через PHP/Laravel просто и легко
Дек10
Создаем канал в Telegram и отправляем в него сообщение через PHP/Laravel просто и легко

Многие проекты используют нотификацию. Некоторые отправляют сообщения на почту, другие в Telegram, Slack и прочее. Сообщения - отличный вариант сообщить о новом заказе, комментарии, материале на сайте или происхождении какого-то события. Для многих вариантов используются библиотеки. Но вот для текстового сообщения в телеграм такое не нужно. Достаточно открыть прямую ссылку с нужными...

  • Chebukin Pavel
  • 0
  • 10.12.2021 23:42

Copyright 2022 © All rights reserved.

Мы в: