Маликов Владислав

Маликов Владислав

Full Stack Разработчик


Загрузка картинок в TinyMCE

Совсем недавно, на одной бирже фриланса ко мне обратился какой-то перец, с просьбой настроить текстовый редактор TinyMCE, который был реализован в связке с Vue.js. Не долго думая, я конечно же согласился — учитывая гонорар.

Долго решения для данной задачи искать не пришлось, этим решением казался файловый менеджер — Responsive Filemanager. По началу я немного тупил, но все же спустя определенное время мне удалось его уставить.

Собственно, именно по этой причине я и решил написать данную статью для вас. Поэтому сегодня я расскажу вам том, как установить загрузчик картинок + файловый менеджер в ваш текстовый редактор — TinyMCE.

Как сделать загрузку картинок в TinyMCE?

1. Просто переходим на официальный сайт бесплатного файлового менеджера — Responsive Filemanager и затем скачиваем ZIP-архив к себе на компьютер.

2. Распакуйте архив, и затем просто закиньте в корневую директорию сайта папку filemanager. Можете сразу посмотреть её по адресу: domain/filemanager/.

3. После этого в корневой директории сайта создайте 2 папки для загрузки картинок — source и thumbs. Не забудьте назначить для них разрешения 777.

4. Внутри \responsive_filemanager\tinymce\plugins лежит папка responsivefilemanager, которая является плагином файлового-менеджера. Закиньте ее в ваш текстовый редактор — tinymce/plugins/.

5. Отредактируйте конфигурационный файл текстового редактора TinyMCE следующим — довольно простым и понятным образом:

tinymce.init({
    selector: "textarea",
    theme: "modern",
    width: 680,
    height: 300,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
   ],
   toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
   toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor  | print preview code ",
   image_advtab: true,
   
   external_filemanager_path: "/filemanager/",
   filemanager_title: "Responsive Filemanager",
   external_plugins: {"filemanager" : "/filemanager/plugin.min.js"}
 });

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

Как настроить Responsive Filemanager?

Для настройки путей в Responsive Filemanager — перейдите в каталог \filemanager\config\config.js. Там же вы сможете настроить и язык вашего файлового менеджера, и еще кучу каких функций.

GeekBrains

ГлавнаяБлогЗагрузка картинок в TinyMCE

Маликов Владислав

Маликов Владислав

Full Stack Разработчик