Свинцовый Пепелац

Расширенная версия редактора NicEdit - работа с изображениями, таблицами, поддержка функции обратного вызова и прочее...

20 января 2015

Общее

Являясь поклонником WYSIWYG редактора NicEdit, я написал для него несколько новых плагинов, доработал некоторые имеющиеся плагины и ядро самого редактора. Свои наработки я решил опубликовать, выпустив расширенную версию NicEdit, которой, и посвящена данная заметка.

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

Расскажу подробнее о доработках, которые включены в представленную здесь расширенную версию NicEdit.

Работа с изображениями

Начал я с того, что добавил в NicEdit функционал для более комфортной работы с изображениями (просмотр директорий на сервере в поисках файлов изображений для вставки их на страницу, а так же кроссбраузерная загрузка изображений на сервер с последующей вставкой на страницу). Результатом эволюции этого функционала стал плагин «Менеджер изображений» (версия 2.0).

Пример запуска NicEdit с «Менеджером изображений».

В тэге <head> вашего HTML документа добавить следующие строки:

<script type="text/javascript" src="nicEdit/nicEdit.js"></script>
<script type="text/javascript">
    bkLib.onDomLoaded(function() {
        new nicEditor({
            imanagerURI: 'index.php?q=imgr',
            iconsPath: 'nicEdit/nicEditorIcons.gif'
        }).panelInstance('test');
    });
</script>

Все настройки и прочую информацию по NicEdit Вы можете найти на сайте проекта - http://nicedit.com/, здесь же Вам нужно обратить внимание только на параметр «imanagerURI». Без правильного указания этого параметра, «Менеджер изображений» работать не будет.

На самой странице должно иметься текстовое поле с соответствующим id:

<textarea cols="60" id="test"></textarea>

Работу «Менеджера изображений» на стороне сервера обеспечивает PHP-класс NicEdit (файл nicedit.lib.php). Этот класс можно легко интегрировать в нужную Вам систему (с проверкой доступа пользователя к просмотру содержимого директорий и загрузки файлов). При необходимости Вы можете переопределить имеющиеся в нём методы и свойства. Список некоторых свойств, которые Вам, возможно, понадобиться переопределить:

  • $maxDimension – максимальный размер ширины/высоты изображения, при превышении которого будет создана уменьшенная копия изображения для вставки на страницу (по умолчанию установлено 500 пикселей).
  • $memoryLimit - максимальный объем оперативной памяти сервера, который разрешается использовать скрипту при масштабировании изображений в байтах (по умолчанию установлено 128M).
  • $maxUploadSize – максимальный размер файла, разрешённого для загрузки (по умолчанию установлено 10 МБ, при значении 0 параметр игнорируется).
  • $uploadErr – массив содержащий список текстов ошибок возвращаемых классом в случае возникновения оных.

Следует иметь в виду, что при масштабировании анимированных GIF анимация игнорируется, чтобы не «раздувать» код класса. При желании этот недостаток можно устранить, переопределив метод miniatures() соответствующей реализацией.

В приложенном к статье архиве имеется скрипт «script.php», в котором представлен пример использования класса NicEdit.

Также я доработал имеющийся функционал для управления параметрами изображения (добавил управление такими атрибутами картинки как: ширина (width), высота (height), горизонтальные отступы (hspace), вертикальные отступы (vspace), класс (class) и стиль (style)).

Работа с таблицами

Добавлен функционал, позволяющий пользователям не искушённым в HTML легко создавать и редактировать таблицы (включая добавление/удаление строк и столбцов, объединение/разбиение ячеек по вертикали и горизонтали, управление атрибутами таблиц, строк и ячеек). Огромное спасибо форуму сайта JavaScript.ru и конкретно пользователю с ником «Дзен-трансгуманист», опубликовавшему в теме посвящённой работе с таблицами некоторые идеи, которые мне помогли в создании описываемого функционала.

Функция обратного вызова

Теперь при инициализации редактора можно указать функцию обратного вызова, передав её параметром «instance_callback». Эта функция будет вызвана по завершении инициализации редактора.

Данная доработка оказалась очень полезной для решения имеющейся в WebKit браузерах (Google Chrome, Opera 15+ и прочие...) проблемы ресайза изображений и элементов таблиц простым потягивание их мышкой за уголок. Для этого теперь можно использовать JQuery плагин «Webkit Resize» от EditorBoost.

Пример использования NicEdit с плагином «Webkit Resize»:

<!-- Подключаем библиотеку JQuery -->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<!-- Для JQuery версии 1.9 и выше подключаем jquery.mb.browser.min.js
     (из-за отсутствия у этих версий JQuery свойства $.browser) -->
<script type="text/javascript" src="jquery.mb.browser.min.js"></script>

<!-- Подключаем плагин Webkit Resize -->
<script type="text/javascript" src="jquery.webkitresize.nonifrm.js"></script>

<!-- Подключаем NicEdit -->
<script type="text/javascript" src="nicEdit/nicEdit.js"></script>

<!-- Инициализация NicEdit -->
<script type="text/javascript">
  bkLib.onDomLoaded(function() {
    new nicEditor({
      iconsPath: 'nicEdit/nicEditorIcons.gif',
      instance_callback: function() {
        $(".nicEdit-main").webkitimageresize().webkittableresize().webkittdresize();
      }
    }).panelInstance('test');
  });
</script>

Читай подробности на сайте проекта EditorBoost.

По поводу плагина «Webkit Resize» хочу ещё заметить, что у таблиц он работает только с элементами TD и игнорирует элементы TH. Чтобы исправить это досадное упущение разработчиков нужно в файле jquery.webkitresize.nonifrm.js в строке 673 сделать небольшое изменение:

Было:

context.$container.find("td").each(function (i, v) {

Стало:

context.$container.find("td, th").each(function (i, v) {

Прочие доработки

Кроме перечисленных доработок я ещё поменял в NicEdit набор цветов в таблицах управления цветом шрифта и фона, от чего управление цветом стало удобнее.


Смотреть демо


Дополнительная информация

За основу я взял NicEdit версии 0.9 r24 (релиз от 7 июня 2012).

Итого

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

Обновление до версии 1.2 (4 марта 2015)

В соответствии с пожеланиями пользователей менеджеру изображений добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начинает свою работу. Если параметр не указан, открывается корневая директория (как раньше). Демо обновил - теперь в нём для демонстрации по умолчанию открывается директория `images`.

Обновление до версии 1.3 (16 марта 2015)

  • Добавлена регистронезависимая сортировка папок и файлов по имени.
  • Ссылка "Перейти на уровень выше" теперь всегда идёт первым пунктом в списке директорий и файлов.

Обновление до версии 1.4 (18 июля 2016)

  • Добавлен функционал позволяющий удалять изображения на сервере через менеджер изображений (в демо версию 1.4 не выставлял).

Прикреплённые файлы:

  • nicEdit-extended-ver.1.0-[ru].zip
    Дата/время публикации: 13 января 2015 / 11:15
    Версия 1.0 локализованная на русский язык
  • nicEdit-extended-ver.1.0-[en].zip
    Дата/время публикации: 13 января 2015 / 11:15
    English Localization of version 1.0
  • nicEdit-extended-ver.1.1-[ru].zip
    Дата/время публикации: 25 февраля 2015 / 10:48
    Версия 1.1 локализованная на русский язык.
    Изменения:
    - Исправлена ошибка отображения папок имеющих числовое имя.
  • nicEdit-extended-ver.1.1-[en].zip
    Дата/время публикации: 25 февраля 2015 / 10:50
    English Localization of version 1.1
    Changes:
    - Fixed display of folders has a numeric name.
  • nicEdit-extended-ver.1.2-[ru].zip
    Дата/время публикации: 4 марта 2015 / 15:08
    Версия 1.2 локализованная на русский язык.
    Изменения:
    - Добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начнёт свою работу.
  • nicEdit-extended-ver.1.2-[en].zip
    Дата/время публикации: 4 марта 2015 / 15:13
    English Localization of version 1.2
    Changes:
    - Added an option `imanagerPath` - path of directory from which images manager will begin work.
  • nicEdit-extended-ver.1.3-[ru].zip
    Дата/время публикации: 16 марта 2015 / 15:22
    Версия 1.3 локализованная на русский язык.
    Изменения:
    - Добавлена регистронезависимая сортировка папок и файлов по имени.
    - Ссылка &quot;Перейти на уровень выше&quot; теперь всегда идёт первым пунктом в списке директорий и файлов.
  • nicEdit-extended-ver.1.3-[en].zip
    Дата/время публикации: 16 марта 2015 / 15:22
    English Localization of version 1.3
    Changes:
    - Added case-insensitive sorting files and folders by name.
    - Link &quot;Go to level up&quot; is always the first item in the list of directories and files.
  • nicEdit-extended-ver.1.4-[ru].zip
    Дата/время публикации: 18 июля 2016 / 13:04
    Версия 1.4 локализованная на русский язык.
    Изменения:
    - Добавлена возможность удаления файлов изображений с помощью менеджера изображений

Комментарии посетителей (54):

Денис
30 декабря 2017 02:15
Спасибо, и с наступающим новым годом. Как мало таких добрых людей, это не легко написать библиотеку на 300 строк
Art
12 мая 2019 15:48
Здравствуйте, Lead Pepelats!
Хороший скрипт вы написали, спасибо. Работает как надо. Хотел его применить на своём сайте (сайт пока в проекте), но вот папку для картинок не получается задать в корне сайта. Желательно чтобы менеджер видел только эту папку и подпапки в ней. Подскажите, пожалуйста, как это сделать. Спасибо!
14 мая 2019 10:00
Приветствую, Art!
Давно не трогал эту скриптину (работает в проектах и не требует внимания :)), так что не очень помню нюансов. По поводу указания директории с картинками - а при создании экземпляра класса NicEdit Вы пробовали указать эту директорию (см. картинку)?
Art
18 мая 2019 11:26
Да, пробовал, не получается. Знаний про адресацию у меня маловато. Буду осваивать.
18 мая 2019 21:31
Art, вот Вы пишите "не получается", а что конкретно Вы указали в этом параметре? Давайте попробуем разобраться вместе.
Art
5 июля 2019 00:43
Здравствуйте, Lead Pepelats!
После вынужденного перерыва возвращаюсь к своей проблеме.
Вот структура сайта:
index.ext
page1.ext
pageN.ext
article/
- article1.ext
- articleN.ext
modules/
- pagesedit.ext
- pagesedit/
- - nicEdit.js
- - nicedit.lib.php
- - nicEditorIcons.gif
- - script.php
images/
- img1.ext
- imgN.ext

Ссылки на страницы такие: ?page = pageN.ext или ?page = article/article1.ext и есть возможность чпу.
Сейчас в файле script.php строки:
if (@$_GET['q'] == 'imgr') {
include(dirname(__FILE__) . '/nicedit.lib.php');
chdir('../../');
$p = new NicEdit(getcwd());
$p->imanager();
}
В редактируемых страницах есть нужные js-строки, в том числе:
iconsPath: 'modules/pagesedit/nicEditorIcons.gif',
imanagerURI: 'modules/pagesedit/script.php?q=imgr',
imanagerPath: 'images'

Если положить весь сайт в папку, то работает нормально, но можно выйти на уровень выше и перейти в любые папки и туда качать и там удалять.
Если положить сайт в корень, то тоже работает, но в менеджере если кликнуть на папке Вверх (две точки), получаем окно с сообщением красным "Не удалось получить список файлов с сервера" без списка картинок и вложенных папок.

Надеюсь, понятно изложил, что есть, а хотелось бы не пускать за пределы images не зависимо от того, где лежит сайт.
Возможно ли это?
Konstantin
14 января 2020 10:44
не получается запустить нормально, выкидывает ошибку
Fatal error: Cannot redeclare imagecreatefrombmp() in /var/www/html/test/edit/nicEdit/nicedit.lib.php on line 329
пробовал v 1.3 и 1.4, результат тот же, при чем если смотреть файл nicedit.lib.php то ошибка расположена на закрывающей скобке функции imagecreatefrombmp()
14 января 2020 11:57
Константин, попробуйте добавить такие строки чтобы избежать "редиклара" ф-ции imagecreatefrombmp
Константин
14 января 2020 12:26
ну это то я понимаю, не понимаю только откуда она еще инклюдится? уже весь код просмотрел, она случайно не из интернета тянется?
14 января 2020 12:51
Константин, "из интернета"? — шаманите :))))

у меня вроде такой ошибки не возникало. используйте везде include_once на всякий случай
Константин
14 января 2020 13:00
[quote]Lead Pepelats 14 января 2020 / 12:51#44 (229)
Константин, "из интернета"? — шаманите :))))

у меня вроде такой ошибки не возникало. используйте везде include_once на всякий случай[/quote]
))) есть немного, вот думаю как в свой проект подключить )))
Константин
14 января 2020 13:41
кстати стоит заменить split() на explode() тем кто использует на бек php > 7.0
14 января 2020 14:01
по поводу explode — велком :) всё что вашей душе угодно :) можете потом о результатах здесь отписать. удачи
Константин
14 января 2020 14:13
я конечно же split() заменил, у меня на бек стоит php v7.2 и я получал ошибку о неизвестной функции, т.к. split на сколько я знаю с версии 7.0 уже не включается )))
так что смело можно менять у кого версия 7.0 и выше

еще вот задумываюсь XMLHttpRequest на fetch, у меня в проекте на нем запросы используются
Константин
14 января 2020 17:33
не силен я в js, не могу понять почему при отправке формы на бек используя fetch, в пост укладывается все за исключением textarea, т.е. что бы не было в форме, все нормально отправляется и приходит, но textarea само поле присутствует но пустое, в отладчике так же это наблюдается
но если использовать ajax jquery то все отправляется как надо
если отключить js скрипты nicEdit, то fetch отправляет так же все нормально включая тег textarea, ощущение, что этот тег по сути реально уже пустой и его содержание находится в памяти js, а jquery ajax его как то видит в памяти, другого объяснения не могу найти
в общем отказался я в итоге от fetch, буду использовать пока старые технологии
но если разработчик объяснит в чем может быть проблема, то буду благодарен )))
Константин
14 января 2020 18:12
нашел в документации к nicEditor, может кому пригодится, нужно синхронизировать перед отправкой textarea с переменной в js
nicEditors.findEditor('id-textarea').saveContent();

в общем кому интересно, код отправки формы на сервер:
window.onload = function() {
// POST отправка данных формы на сервер
document.querySelector('#btn-edit').onclick = function() {
nicEditors.findEditor('post-edit').saveContent();
let frm = document.querySelector('#frm-edit');
let url = frm.action;
let method = frm.method;
let body = new FormData(frm);

let fetchData = {
method: method,
// headers: {
// 'Content-Type': 'multipart/form-data', // отправляемые данные
// },
body: body,
cache: 'no-cache',
}

requestFetch4(url, fetchData);
//document.querySelector('.hide-form').classList.remove('form-on'); // скроем форму выбора
}
async function requestFetch4(url, fetchdata) {
return await fetch(url, fetchdata)
.then(status)
.then(json)
.then(function (data) {
if(data.path != '') {
insertImgTArea();
console.log('Request path', data.path);
}

out_msg(data.status + ': ' + data.message);
})
.catch(function (error) {
console.log('Request failed', error);
});
}
function status(response) {
if(response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}

код редактора
<form class="frmpanelka" action="edit-success.php" method="post" id="frm-edit">
<div class="form-group">
<label>Название</label>
<input class="form-control" type="text" value="<?php echo htmlspecialchars($data['name'], ENT_QUOTES); ?>" name="name" id="name-edit">
</div>
<div class="form-group">
<label>Описание</label>
<input class="form-control" type="text" value="<?php echo htmlspecialchars($data['description'], ENT_QUOTES); ?>" name="description" id="description-edit">
</div>
<div class="form-group">
<label>Пост</label>
<textarea class="form-control" rows="3" name="post" id="post-edit"><?php echo htmlspecialchars($data['text'], ENT_QUOTES); ?></textarea>
<button type="button" class="btn btn-primary " id="btn-edit">Сохранить пост</button>
</div>
</form>

естественно не забываем про подключение файла с кодом js, указанным выше
форма отправляется по новой технологии fetch, хотя вроде как она уже много лет ))) но ее почему то предрекают заменой ajax

ps. на вставки php кода в форме не обращайте внимания, это от моего блогового ядра осталось )))
Константин
14 января 2020 19:30
собрал и упаковал в архив, кому нужно пишите Telegram: @coder_ex

все что нужно будет сделать для интеграции в свои проекты, это заменить файл edit-success.php на свое ядро движка, т.е. интегрировать запросы $_POST если ваш сервер на php, про другие не в курсе, не работал с ними

ps. архив не могу тут выложить т.к. нет тут такого функционала
Константин
14 января 2020 19:36
вот как то так он выглядит вместе с всплывающими сообщениями )))
15 января 2020 10:58
Ну Константин прям взялся за никэдит :) Одобрям-с :) Если будете какие-то принципиальные доработки делать, могу выложить их здесь или можем совместно новый пост написать на тему nicEdit. Будут мысли, пишите мне через обратную связь.
Константин
21 января 2020 21:16
Долго я мучился и наконец то реализовал подключение плагином nicEdit

Написать комментарий:


Максимальный размер файла загружаемого изображения 7 Мб