Настраиваем загрузку изображений в CKEditor 4 для Vue приложения на PHP

Небольшое введение. Сейчас мы будем включать и настраивать загрузку изображений в CKEditor 4 для VUE приложения. Для этого мы напишем 2 простеньких PHP скрипта, которые будут выполнять нужные функции на стороне сервера: загрузки и выбора нужной картинки.

Я надеюсь что вы знаете JavaScript, Vue.js и PHP хотя бы на базовом уровне, потому что просто повторить все, что я тут написал, не выйдет. Как минимум в двух-трех местах придется включить голову и привнести свою логику в функционал скриптов. Со своей стороны я обещаю разжевать все по максимуму.

В моем примере я буду использовать ckeditor4-vue (который я установил через npm) и UIkit. Последнее это обычный CSS-фреймворк как Bootstrap, с помощью него я буду делать файл browse.php (чуть позже мы его создадим) более симпатичным. Если не нравится UIkit можете использовать Bootstrap или вообще ничего, здесь решите сами.

Установка CKEditor 4 для Vue

Для начала опишу процесс установки ckeditor4-vue для наглядности, но если уже выполнили этот пункт, смело пропускайте раздел.

Устанавливаем CKeditor с помощью команды (в терминале или командной строке проекта):

npm install ckeditor4-vue

Если у вас Unix-подобная операционная система (Mac/Lunix) добавьте еще перед “npm” команду “sudo”. И пробел не забудьте.

После сделайте import модуля в main.js (или нужный вам компонент) с помощью следующего кода:

import CKEditor from 'ckeditor4-vue';

Также, попросите Vue использовать CKEditor с помощью еще одной строчки кода:

Vue.use(CKEditor);

И в экземпляр data вашего vue приложения добавьте это:

   data: {
     editorData: '<p>Привет, я текст...</p>',
     editorConfig: {
       language: 'ru',
     }
   }

Ну и для наглядности, у вас должно получиться что-то вроде этого:

И сейчас дополнительно все разъясним. 

Во-первых, editorData хранит в себе текст, который попадет в визуальный редактор после инициализации (рендеринга) vue приложения. Прямо через 2 минуты все поймете.

Во-вторых, объект editorConfig - это список плагинов, которые похожи на обычные ключ:значение в JavaScript. “Ключ” language подключает модуль с языками, а значение ‘ru’ включает русский язык.

Это так, для справки. Вообще, когда я через npm поставил CKEditor, у меня русский и без этого был по умолчанию. Данный пример просто на будущее, ибо мне проще показать сейчас как подключать плагины. Мы еще минимум 4 подключим, но минутой позже.

И последнее, что нам осталось, это вызвать сам визуальный редактор на нужной странице. Для этого в template (там где HTML-код) нужного вам компонента установите это:

<ckeditor v-model="editorData" :config="editorConfig"></ckeditor>

Я делаю SPA (Single Page Application), поэтому у меня просто index.html. Данный html тег вызывает визуальный редактор. Пример как это выглядит у меня:

Важно: например, если вы создаете визуальный редактор в другом компоненте (не в main.js), то просто вставьте вышенаписаный код без дополнительных импортов в компонент. Т.е в основном main.js вы импортируете CKEditor и используете Vue.use(), а в нужном компоненте уже вызываете компонент CKEditor.

После все сохраняем и проверяем. Теперь у нас должен открываться CKEditor на нужной нам странице.

Включение загрузки и выбора изображений в CKEditor

С установкой закончили, переходим к самому важному.

Особо внимательные уже заметили, что после появления визуального редактора, в модальном окне выбора изображений отсутствует кнопка выбора картинки с сервера (и загрузки на сервер тоже нет). 

Чтобы это исправить надо подключить четыре плагина:

     editorConfig: {
       language: 'ru',
       filebrowserUploadMethod: 'form',
       extraPlugins: 'uploadimage',
       filebrowserUploadUrl: '/ckeditor/upload.php?type=Files',
       filebrowserBrowseUrl: '/ckeditor/browse.php?type=Files'
     }

Пора объяснять. 

language: 'ru',

На всякий случай повторюсь, не все прочитали текст под первым заголовком. Этой командой мы включаем русскую версию CKEditor.

filebrowserUploadMethod: 'form',

Данный плагин преобразует запросы в upload.php в нужный нам формат. Т.е “form” - это FormData, что значит загрузка какого-то медиафайла. По умолчанию в последних версиях CKEditor 4 в “filebrowserUploadMethod” установлен метод “xhr”, что значит XMLHttpRequest, он как раз нам только помешает. Нам нужна FormData.

extraPlugins: 'uploadimage',

Как я понял, это нужно для корректной работы Drag and Drop. На русском это “Перетаскивание”. Т.е вы с рабочего стола перетаскиваете картинку в браузер (конкретно в визуальный редактор). Правда “перетаскивание” у меня и без этого работает. 

Почему? Не представляю, я не шарился настолько сильно в документации, но этот плагин тоже подключил на всякий случай.

filebrowserUploadUrl: '/ckeditor/upload.php?type=Files',

Тут все просто, это относительный путь к скрипту, который будет выполнять загрузку файлов. Например, site.ru/ckeditor/upload.php.

filebrowserBrowseUrl: '/ckeditor/browse.php?type=Files'

А это относительный путь к скрипту, который будет выполнять функцию “поиска и выбора” картинок на сервере. Его путь - site.ru/ckeditor/browse.php

В конце концов у нас получается что-то такое:

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

Загрузка файла на сервер: пишем скрипт upload.php

Чтобы все получилось “красиво”, нам с вами надо предусмотреть две вещи.

Первая - это стандартная загрузка файла с помощью PHP и получение “ссылки” на загруженный файл для вставки в визуальный редактор CKEditor.

Вторая вещь - это учесть загрузку файлов через Drag and Drop или через “копировать - вставить”. Когда вы попробуете “перетащить” фотографию и “кинуть” ее в редактор, то увидите ошибку. А дело в том, что визуальный редактор при таком поведении ожидает данные в JSON формате. 

Короче, в скрипте ниже я все предусмотрел.

Код для скачивания доступен по ссылке на GitHub.

Превью файла:

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

Будьте внимательны к переменной $upload_dir, она статичная и указывает на папку, которая уже должна существовать у вас на сервере по адресу site.ru/img. Но никто не запрещает вам создать свою папку в другом месте и с другим именем. Главное обратите внимание, что подобная переменная еще будет создана в файле browse.php.

Хотелось бы отметить

У данного скрипта есть огромная проблема с безопасностью. Каждый может загружать Вам файлы на сервер, а это не комильфо. Поэтому создайте сессию и выдавайте разрешение загружать данные на сервер (или вообще пользоваться этим скриптом) только авторизованному пользователю. Если не знакомы с сессиями… земля вам пухом. Вот ссылка, тут подробно про сессии в PHP все написано.

Выбор файла на сервере: пишем скрипт browse.php

Здесь особо нет ничего сложного, просто обратите внимание на JavaScript код в начале файла. Поймите его логику для лучшего восприятия. Данные которые передаются в скрипт returnFileUrl() приходят из события onclick на 103 строке.

Код для скачивания доступен по ссылке на Github.

Превью файла:

В основном, проблемы могут возникнуть только при тупом копировании. Больше всего стоит обратить внимание на переменные href (JavaScript) и srcdir (PHP) - в них статично помещены пути к папке с картинками.

В итоге, ваше “приложение” будет выглядеть как-то так:

Не забываем, что у меня для стилизации “приложения” поверх всего этого стоит CSS Framework UIkit. У вас это будет выглядеть менее симпатично.

Теперь, когда в визуальном редакторе вы будете нажимать “Выбор на сервере”, то в новом окне будет открываться browse.php. А если все правильно сделано, то после нажатия на “Выбрать”, url картинки будет передаваться в визуальный редактор через функцию returnFileUrl(), а окно с browse.php закрываться.

Хотелось бы отметить

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

Решение, продемонстрированное в browse.php, не идеальное, меня лично волнует то, что при большом количестве изображений “приложение” будет работать медленно. Доработку всего этого дела оставляю полностью на вас. 

В решении для себя я добавил простую пагинацию (вывожу только 20 элементов на странице, а а новые 20 со второй страницы загружаю через ajax). Можно еще просто повесить отложенную загрузку картинок через JavaScript.

У меня "что-то" не работает…

Скрипты рабочие, вставлены в два проекта. Скорее всего у вас проблема с путями (маршрутизацией файлов). В помощь могу предложить только использовать var_dump() и console.log(), а где дампить думайте уже сами. Если это вам ничего не говорит, ознакомьтесь с методами тестирования кода в PHP и JavaScript.

Еще оставлю ссылку на кусок JavaScript кода для browse.php с официальной английской документации. Вдруг кому-то не нравится мое решение в returnFileUrl(). 

Бонус

Ну и напоследок посоветую пару полезных фич. 

Плагин, очищающий лишние HTML теги из буфера обмена. Например, скопировали текст из Википедии, а редактор еще CSS подтянул. Это моветон.

pasteFilter: 'p; a[!href]'

Плагин, разрешающий использовать событие onclick на картинки (img можно поменять на p). Например, вы попытаетесь сохранить через визуальный редактор такой обработчик события, CKEditor его сотрет по соображением безопасности. Это нормально, но вдруг вы такой же извращенец как и я хотите внедрять спорные решения через визуальный редактор в проект.

extraAllowedContent: 'img[onclick]'