Редактор разметки iTiny 2.X

3129
Редактор разметки iTiny

Шо! Опять! (c)))

Да-да, очередной пост про редактор для двойки и очередной пост про редактор TinyMCE.

В данной версии редактор урезан ровно вдвое. Из 44 стандартных плагинов редактора, могут быть задействованы только 22. А простым пользователям сайта и того меньше. Но обо всём по порядку.

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

Установка стандартными способами. После установки необходимо сделать:
1. Зайти в настройки компонента, настроить и сохранить, также поступить и с доступами.
2. В главном файле вашего шаблона \templates\шаблон\main.tpl.php перед выводом
Код PHP:
  1. <?php $this->head(); ?>
подключить файл стилей templates\default\css\itiny.css, чтобы получилось так
Код PHP:
  1. <?php $this->addMainCSS($this->getTplFilePath('css/itiny.css', false)); ?>
  2. <?php $this->head(); ?>
Соответственно, вы можете этот файл скопировать в свой шаблон и изменять его на своё усмотрение. Подробнее для чего это надо, объясню ниже.
3. При желании, чтобы загруженные картинки при клике увеличивались "в полный рост", надо там же подключить яваскрипт, чтобы получилось так
Код PHP:
  1.  
  2. <?php $this->addMainCSS($this->getTplFilePath('css/itiny.css', false)); ?>
  3. <?php $this->head(); ?>
  4. <script type="text/javascript">$(document).ready(function() { icms.modal.bindGallery('.img-gallery'); });</script>
На этом можно смело переходить к использованию редактора.

Настройки компонента.
Спойлер
"Тема редактора" и "Скин оформления" отвечают за внешний вид самого редактора.

"Высота блока редактора" - минимальная высота области редактора. При заполнении контентом, эта высота автоматически увеличится до 700рх.

"Ширина вставляемого изображения" и "Пресет загружаемых изображений" - загружаемая картинка будет иметь размер указанный в настройках выбранного пресета, а отображаться, по умолчанию будет с размером указанным в "Ширина вставляемого изображения". Конечно, после вставки изображения его отображаемый размер можно изменить на другой.

"Длина текста на странице" - с данным редактором предоставляется возможность деления длинного текста на страницы. Данная опция автоматически делит текст страницы с указанным количеством символов. Надо учитывать, что при подсчёте учитывается html разметка текста и также ищется окончание блока или предложения. Поэтому указав 3000 символов вы можете получит на одной странице текст длиннее, чем на другой. Также не исключены ситуации, когда страницу может поделить скажем по коду картинки. В этом случае картинка не будет показана, вместо неё будет выведен обрывок html кода с продолжением на другой странице. Поэтому данную опцию используйте с постоянным контролем.
Если оставить это поле пустым, то делить на страницы можно используя соответствующую кнопку в панели.
Деление на страницы при установленном компоненте iTiny, позволяет делить тексты написанные с использованием любых других редакторов.
При делении, на второй и следующих страницах, к заголовку и к title записи добавляется фраза "Страница №№".

"Только с этим редактором" - позволяет ограничить разделение на страницы тексты, только в полях с этим редактором.

"Подключаемый файл стилей" - путь к файлу от корня шаблона. Содержимое блока с редактором максимально приравнено к реальному отображению на сайте. Другими словами, цвета, шрифты, размеры приведены файлом стилей к некоторому единому значению. Примерно, как это будет выглядеть в редакторе, так это и будет выглядеть в результате.
В дефолтном шаблоне за это отвечает файл templates\default\css\theme-text.css, он же подключается по умолчанию. При желании вы можете изменить его в настройках компонента на свой файл в вашем шаблоне. Оставьте пустым, если нет такого файла, иначе будет подтягиваться из дефолтного шаблона.

"Контекстное меню" - если заполнено, то будет использоваться контекстное меню.

"Допустимые элементы" - тут можно указать допустимые элементы которые можно будет использовать в исходном коде и в самом редакторе. Если вы что-то здесь заполните, то будут доступны только указанные здесь элементы. Остальные будут вырезаны ещё в момент написания или вставки текста в окне редактора.

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

"Недопустимые элементы" - здесь можно перечислить элементы, которые однозначно будут вырезаны из кода текста.

Настройки доступа

Тут всё стандартно. Администратор сайта видит такой редактор
Редактор разметки iTiny
Гость увидит (если увидит) такой
Редактор разметки iTiny
Все остальные увидят так, как рука админа дрогнет. В зависимости от проставленной галочки.
Спойлер
Из всех настроек расскажу только про "Выбор формата текста", остальные интуитивно-понятные.

Выбор формата текста

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

Теперь о грустном. Всё работает замечательно, пока не включить опцию "Обрабатывать типографом" в настройках поля. Типограф вырезает у тегов span все аттрибуты, включая class, кроме аттрибута style.
Исправить эту ситуацию можно изменив эту строку
Код PHP:
  1. $jevix->cfgAllowTagParams('span', array('style' => '#text'));
на это
Код PHP:
  1. $jevix->cfgAllowTagParams('span', array('class' => '#text', 'style' => '#text'));
Но данный хак может слететь при обновлении.

Загрузка изображений происходит стандартными методами движка - также как и в других редакторах. То есть выбирается случайное название и путь для сохранения. Если вы загрузили изображение, затем передумали, и загрузили другое, первое - как и в других редакторах -остаётся хламом на диске. В целях безопасности или недоверия к сторонним файловым менеджерам и редакторам картинок, здесь они отсутствуют. Также отключен стандартный редактор изображений от TinyMCE.

Для благодарных пользователей
Конструктор - в форме | Конструктор форм iForms. Добавление записи в типы контента гостем.
Комментарии (47)
Реклама
cms
Kreator 7 марта 2017 в 18:37 +2
small user social cms
За дополнение +

)) Прям ТиниБУМ какой то)

У меня в дополнениях тоже предвидится обновление этого редактора. Только со своими плюшками и особенностями.
Алексей Тимофеев 7 марта 2017 в 18:42 +2
small user social cms
С кажу больше с БОЛЬШИМИ ПЛЮШКАМИ.
Loadырь 7 марта 2017 в 18:57 +2
small user social cms
опять интрига
vikont 7 марта 2017 в 20:33 +1
small user social cms
ОТЛИЧНО! Все настройки удобны и понятны! Обязательно попробую ваш вариант! Думаю он должен быть практичнее!
Вот и первый шаг, для объявления iTiny еще одним официальным редактором Инстанта!
На мой взгляд, лучшим редактором.

Я правильно понял, что при загрузке в папку плагины любых дополнительных плагинов, они появляются в настройках редактора?
vikont 7 марта 2017 в 20:36 +2
small user social cms
Вот думаю, и стоило ли мне высовываться со своим вариантом Tiny MCE, когда тут такое! smile
Ладно, пошел потрошить ваш компонент...
Андрей 7 марта 2017 в 20:55 0
small user social cms
laugh
Loadырь 7 марта 2017 в 21:00 +1
small user social cms
При загрузке дополнительных плагинов их надо объявлять в файле \wysiwyg\itiny\wysiwyg.class.php, но в админку, в настройки компонента они всё равно не попадут, но будут работать.
vikont 7 марта 2017 в 22:22 0
small user social cms
Да, работает. Но почему то не работает редактирование изображений, его меню урезано до кнопки входа в диалог вставки изображений.
Нет файлового менеджера и нельзя каждому пользователю выдать собственную папку.
На одной странице с TinyMCE начинает под него подстраиваться и требовать недостающие плагины, хотя эти функции у него не включены scratch
Loadырь 8 марта 2017 в 06:52 +1
small user social cms
Редактирование изображений здесь отключено, так как стандартный редактор "портит исходный код" выкладывая шифрованный код изображения, а нестандартным редакторам картинок я не доверяю, потому что написаны не мной. Кнопки вы можете вернуть себе согласно документации.
Файловые менеджеры также отсутсвуют, по той же причине. Для добавления своего или дополнительного плагина, сначала изучите документацию, как это правильно сделать. Так как просто закачать в папку плагинов файлы и прописать их название в разделе plugins не всегда достаточно.
Андрей 13 февраля 2018 в 23:53 -1
small user social cms
Скажите пожалуйста, а изображения загружаются куда? В папку upload, стандартно?
Loadырь 14 февраля 2018 в 06:37 +1
small user social cms
Да, в папку upload как и стандартный загрузчик, например в redactor.
AndroS 8 марта 2017 в 01:20 0
small user social cms
Эммм, а при чем тут разметка?
Я уж подумал, редактор микроразметки, а тут просто редактор )))
Loadырь 8 марта 2017 в 06:43 0
small user social cms
Вы же как-бы разметку в нём "редактируете". А про микроразметку тут ни слова. )))
Pasechnik 8 марта 2017 в 09:27 +2
small user social cms
К редактору нужен хороший загрузчик с корректным удалением картинок, и в коробку. Тогда он станет №1 для пользователей. Подозрительных и сомнительных юзеров можно отрезать репутацией, остальным полный комфорт в работе.
Loadырь 8 марта 2017 в 10:16 +3
small user social cms
К движку нужен компонент, наподобие Media Library в вордпресе. Привязать его к редактору, дать возможность устанавливать редактор для комментариев и для форума со своим набором кнопок и он станет не № 1, а станет единственным редактором.
Pasechnik 8 марта 2017 в 10:34 0
small user social cms
Для комментариев визуальный редактор я бы устанавливать не стал, в остальном полностью согласен. Tiny MCE хорош и бесплатен, не нужно будет зависеть от капризов разработчиков, как в случае с Imperavi.
Pasechnik 8 марта 2017 в 10:38 0
small user social cms
Из загрузчиков очень нравится http://instantcms.ru/blogs/all-instant-cms/failovyi-menedzher-zagruzchik-failov-dlja-redaktora-tinymce-4.html
В нем были дырки, но проект обновляется, адекватная поддержка. Только к нему нужно прикрутить распределение по правам и папкам, как это сделал vikont.
Pocus 8 марта 2017 в 12:28 0
small user social cms
© Н.В. Гоголь:
Если бы губы Никанора Ивановича да приставить к носу Ивана Кузьмича, да взять сколь-нибудь развязанное, какая у Балтазара Балтазаровича, да, пожалуй, прибавить к этому еще дородности Ивана Павловича — я бы тогда тотчас же решилась. А теперь — поди подумай!
Ну и чё теперь делать? Как плагин "mymenu" от vikont приставить к админке от Loadырь и т.д?
Кто нибудь сделал осознанный выбор, iTiny vs Плюшки? Ваши доводы?

Loadырь:
Также добавил возможность вставки яваскриптов. Это не есть хорошо, поэтому данная фича будет доступна только тем группам пользователей, у кого есть на это разрешение
Loadырь:
Типограф вырезает у тегов span все аттрибуты, включая class, кроме аттрибута style.
А скрипты из "Дополнительные допустимые элементы" не вырезает? Тогда почему там же не разрешить классы для span?
И вообще, нужен ли теперь типограф, при таких-то шикарных настройках редактора?

Loadырь:
Деление на страницы при установленном компоненте iTiny, позволяет делить тексты написанные с использованием любых других редакторов.
Автоматически? Ведь в других редакторах нет кнопки для разбивки страниц.
Loadырь 8 марта 2017 в 16:23 0
small user social cms
Да, автоматически по длине. Хотя можно напечатать некоторое "заклинание" оно тоже сработает. Но для тех полей лучше использовать пагинацию по длине.
Губы, уши, нос и прочее - это на любителя. Кому-то нужен комбайн, мне нужно что-то простое.
Шляпник 12 марта 2017 в 14:20 0
small user social cms
Установка стандартными способами. После установки необходимо сделать:
Прошу прощения, а где можно найти архив с этим редактором и "стандартный способ" установки? В тексте и комментариях не увидел к сожалению.
Loadырь 12 марта 2017 в 14:31 +1
small user social cms
У меня в файлах
Шляпник 23 марта 2017 в 18:32 0
small user social cms
Спасибо, наконец дошел до этого. Вроде бы все сделал по инструкции, выбрал в админке-настройки -интерфейс-HTML редактор по-умолчанию-itiny, но у меня все равно показывает старый редактор.
В \templates\шаблон\main.tpl.php строки добавил.

Может где то не переключил что то? Подскажите пожалуйста в чем может быть причина?
Loadырь 23 марта 2017 в 18:53 +1
small user social cms
Пропустили настройки: Тип контента - Поля - Текст Html - редактор
Шляпник 24 марта 2017 в 07:46 0
small user social cms
Все заработало, огромное спасибо!
Pocus 19 марта 2017 в 13:15 0
small user social cms
Loadырь, а можно сделать прилипание панели к верхнему краю экрана при скроллинге? Как в "Redactor"
Loadырь 19 марта 2017 в 13:28 0
small user social cms
Не исключено.
Pocus 19 марта 2017 в 13:38 0
small user social cms
Понятно, значит нельзя.
Я не имел в виду доработку. Думал, может просто включить надо.
Pocus 19 марта 2017 в 20:44 0
small user social cms
Скин lightgay не адаптивный. Ну это так, если вы не знали.
GNabi 1 апреля 2017 в 17:44 0
small user social cms
"Компонент «Редактор разметки iTiny» не имеет настроек" у меня так пишет
Loadырь 2 апреля 2017 в 16:00 0
small user social cms
Что-то криво встало. Проверьте права на файлы и папки и их наличие.
Никита 17 июня 2017 в 09:57 0
small user social cms
Здравствуйте, уважаемый разработчик!

Спасибо Вам большое за такой замечательный редактор!

Всё работает хорошо. Правда, я обнаружил непонятное поведение редактора при работе с изображением:
если в настройках компонента в поле "Пресет загружаемых изображений" я указываю "Оригинальный", то при создании публикации и попытке загрузить в текст картинку, появляется вот такое окно:



и картинка не загружается.

В случае указания пресета "Большой" всё работает.

Может быть, нужно где-то задать дополнительно какие-то настройки?
Loadырь 17 июня 2017 в 14:32 0
small user social cms
Скачайте файл itiny_1_1_install_2017_06_17.zip у меня в файлах заново и замените файлы из папки package по фтп.
Никита 17 июня 2017 в 17:21 0
small user social cms
Спасибо Вам, заработало!
Подскажите, пожалуйста, а как сделать так, чтобы картинка открывалась в новом окне?
Loadырь 17 июня 2017 в 18:23 0
small user social cms
Не делать рекомендацию из пункта 3.
3. При желании, чтобы загруженные картинки при клике увеличивались "в полный рост", надо там же подключить яваскрипт, чтобы получилось так
Никита 17 июня 2017 в 23:04 0
small user social cms
Спасибо за быстрый ответ!

Однако пункт №3 я не выполнял. И без него картинка кликабельна, но всегда открывается в той же вкладке, что и статья.
Loadырь 18 июня 2017 в 11:37 +1
small user social cms
В файле wysiwyg\itiny\wysiwyg.class.php в 122 строке замените
Код PHP:
  1. <a class="img-gallery"
на это
Код PHP:
  1. <a target="_blank" class="img-gallery"
Никита 18 июня 2017 в 16:46 0
small user social cms
Благодарю Вас за помощь!
Всё работает!
Ris 17 июня 2017 в 17:51 0
small user social cms
Loadырь,
А можно ли редактировать набор кнопок редактора каким-нибудь простым образом?
Мне, например, такое разнообразие непонятных кнопок не нужно.
Loadырь 17 июня 2017 в 18:10 0
small user social cms
Вся палитра галочек в вашем доступе.
Loadырь 17 июня 2017 в 18:20 0
small user social cms
Это минимальный набор

Или вам надо ещё минимальней?
Sergon 27 июня 2017 в 10:38 0
small user social cms
Всем здравия!
А как включить кнопочку размер текста, шрифт?
Loadырь 27 июня 2017 в 12:40 0
small user social cms
В этой версии не включить, здесь всё вынесено в стили. В настройках доступов это "Список стилей". А сами стили прописываются в файле templates\default\css\itiny.css вашего шаблона.
Sergon 27 июня 2017 в 14:55 0
small user social cms
понял! Благодарю, буду думать ...
Sergon 27 июня 2017 в 16:25 0
small user social cms
а можно сделать чтобы эти стили названия имели на русском, ну чтобы понятнее было. "Крупный шрифт", "Заголовок" и т.п.
Loadырь 27 июня 2017 в 17:06 0
small user social cms
Можно будет, только после того, как кодирование на css будет доступно на русском языке. В вашем случае вероятно, достаточно пункта в доступах "Выбор формата текста".
@4info 7 июля 2017 в 08:41 0
no avatar
Добрый день!
Благодарим за нужное дополнение и Вашу вдумчивую работу над ним и не только!)


Решили установить и испытать в деле. Первое время вопросов не возникало, модераторы и редакторы отзывались положительно. Позже, от пользователей стали поступать жалобы. Выяснили, что они не могут вставить текст из текстового редактора (Word, Writer, etc.).

Сначала возникла мысль, что ставит в тупик отсутствие на панели привычной кнопки "Вставить". И здесь первый вопрос: как её вынести на панель? Прямых настроек нет. Вписали в поле настроек контекстного меню "paste", кнопка (в конт. меню) появилась, однако при нажатии выдаёт: "Ваш браузер не поддерживает прямой доступ к буферу обмена. Пожалуйста, используйте следующие сочетания клавиш: Ctrl+X/C/V" Аналогично и другие команды работы с буфером обмена. Но и сочетания клавиш Ctrl+V (что пытались использовать изначально и по умолчанию) не работает. Другие - работают.

Полагаю, с настройками и версией браузера не связано, так как версия не самая древняя, а текст отлично вставляется (Ctrl+V), но в режиме "Исходный код". Видимо, "подрезан" какой-то скриптик. Также, скорее всего, не связано с ограничениями по доступу. Проверяли из административного интерфейса.

Подскажите, пожалуйста:
- как исправить ситуацию или от чего может зависеть невозможность вставки текста по Ctrl+V?
- как вынести кнопку "Вставить" на панель инструментов?
Loadырь 7 июля 2017 в 15:46 0
small user social cms
Добрый день! Не могу повторить вашу проблему. Последний мозилла Файерфокс и Ворд 2007 позволяют копировать текст путём нажатия клавиш Ctrl+V. Также путём простого перетаскивания выделенного текста мышью из ворда в редактор в браузере. https://yadi.sk/i/Om0m66fh3KqZud
И это на всех уровнях доступов у пользователей. При этом никакие предупреждения или всплывающие окна не появляются.

Есть опция в доступах "Вставить как текст". При включении этой кнопки при вставке из ворда обрезается всё форматирование и html тэги, и вставляется только текст. Но он в любом случае вставляется. Из WordPad текст вставляется всегда без форматирования, просто текст. Про Writer, etc. и прочие ничего сказать не могу.