Новые функции редактора текста и короткий FAQ

Блог им. kachayev
Начиная с 617 ревизии SVN стандартный редактор текста Livestreet обзавелся новыми функциями. Теперь есть возможность превратить выделенный текст в заголовок h4, h5 или h6, а также в один клик оформить нумерованный или маркированный список.

Для полноценного использования этого функционала были исправлены старые баги парсера — добавление лишних отступов строк между пунктами списка и после заголовков (сделанные фиксы касаются external-библиотеки Jevix, а не только ядра).

Ввиду большого числа писем о некорректной работе этого редактора в версии 0.3.1 — под катом правила по корректному переносу.

Итак, как перенести корректно редактор на ядро 0.3.1:

1. Обновляем редактор для поддержки списков:
trac.lsdev.ru/livestreet/changeset/607

2. Обновляем редактор для поддержки заголовков:
trac.lsdev.ru/livestreet/changeset/608

3. Тянем себе Jevix 617 ревизии:
trac.lsdev.ru/livestreet/browser/trunk/engine/lib/external/Jevix/jevix.class.php?rev=617
Кидаем вместо старого, помня что в 0.3.1 папка с библиотеками (lib) лежит в /classes/.

4. Далее нужно добавить новые настройки Jevix. Для этого заходим в /classes/modules/sys_text/Text.class.php — там находим функцию JevixConfig() и меняем ее код на этот:
trac.lsdev.ru/livestreet/browser/trunk/engine/modules/text/Text.class.php#L48
(ревизии не позже 617).

Пользуемся на здоровье.

Теперь, ответы на некоторые очень часто задаваемые вопросы.

1. «Почему при сохранении топика вырезается атрибут class у тегов?», «Я нашел багу — при вставке в топик JavaScript, он не работает», «Почему пользователю запрещено создавать iframe в топике?» и др.

Отвечу на все сразу. Это не БАГИ. Это настройка парсера Jevix. Выполняется она в указанной выше функции JevixConfig() модуля Text (sys_text в 0.3.1). Если вы считаете, что пользователю можно доверить больше, чем доверено — переделайте настройку под себя.

2. Как добавить новую кнопку в редактор?

Самый простой вариант: кнопка для оборачивания текста в тег. Например, кнопочка BOLD оборачивает текст в тег b. Как добавить такую кнопку? По образу и подобию остальных:


<a href="#" onclick="lsPanel.putTagAround('topic_text','ТУТ_ТЕГ_ОБЕРТКА'); return false;" class="button">
<img src="ссылка на изображение" width="20" height="20" title="название кнопки">
</a>


В других случаях — добавление кнопки не самое тривиальное задание, требующие умение работать с JavaScript (искать корни в /js/panel.js).

3. Как убрать в движке редактор в поле комментирования, если таковой не нужен?

Для отключения использования редактора в форме достаточно удалить слой с кнопочками наверху:


<div class="panel_form">
...
</div>


Так, чтобы остался чистый textarea. Все просто.

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

avatar
наверное правильнее всего сделать патч архив с файлами для того что бы кинуть из просто в папку для версии 0.3.1
  • Vilz
  • 0
  • ↓
avatar
Зачем? Я думаю, те кому нужен этот редактор именно в 0.3.1 не поленятся перетянуть 4 файла руками.
avatar
Обновил Jevix — проблема с h4 осталась
avatar
Какая проблема?
avatar
После h4 все равно идет перенос. Нужно убрать. Нужен только до.
avatar
у меня работает
avatar
Да, уже пофиксил Качаев. В твиттере общались
avatar
А в каких файлах то этот редактор, я так и не понял?
Мне надо вот такой код генерировать
<ul id="myGallery">
<li class="imageElement">
<h4>Item 1</h4> 
<blockquote>Description</blockquote>
<a href="/uploads/images/0/0/0/0/0/1/2009/11/26/a7f14aae6c.jpg" class="open">Открыть</a>
<img src="/uploads/images/0/0/0/0/0/1/2009/11/26/bce14e3d78.jpg" class="full" alt=""/>
</li>
<li class="imageElement">
<h4>Item 2</h4>
<blockquote>Описание</blockquote>
<a href="/uploads/images/0/0/0/0/0/1/2009/11/24/5eeb2c322e.jpg" class="open">Открыть</a>
<img src="/uploads/images/0/0/0/0/0/1/2009/11/26/ef008bf4bc.jpg" class="full" alt="Альт"/>
</li>
<li class="imageElement">
<h4>Item 3</h4>
<blockquote>Описание</blockquote>
<a href="/uploads/images/0/0/0/0/0/1/2009/11/26/cd2d4eb779.jpg" class="open">Открыть</a>
<img src="/uploads/images/0/0/0/0/0/1/2009/11/26/cd2d4eb779.jpg" class="full" alt="Альт"/>
</li>
</ul>
avatar
kachayev в твиттере понятным языком не получилось изъяснить, попробую тут. Проблему с заголовками вы решили, но если после заголовков идут списки или просто список друг за другом то BR всё равно ставится.
avatar
BR ставить куда? Между элементами списка? Или между самими списками?
avatar
наоборот удалять надо.

есть пишешь в редакторе:
<h5>yuyyu</h5>
<ul>
	<li>tryu</li>
</ul>
<ol>
	<li>tyyyytu</li>
</ol>
<h5>yuyyu</h5>

то на выходе после работы Jevix получаешь:
<h5>yuyyu</h5>

<ul>
	<li>tryu</li>
</ul>

<ol>
	<li>tyyyytu</li>
</ol>

<h5>yuyyu</h5>


блин, баг с CODE, в общем во втором примере (на выходе) там где пустые строки там был BR, вот его удалять.
avatar
Это можно настроить. 
// Не нужна авто-расстановка 
		$this->oJevix->cfgSetTagNoAutoBr(array('ul','ol','li','object'));
в Text.class.php
avatar
конечно можно, но хотелось бы что бы это было в LS 0.4, ведь это правильно, зачем лишние BR там где они совершенно не нужны!
avatar
Эта строка есть в 0.4
Вы ее себе перетянули как написано в посте?
avatar
kachayev, я сейчас ничего не перетягиваю я сейчас говорю за LS 0.4 в котором есть эта проблема, т.ё. как бы сообщаю о недочёте)
avatar
Опа… Я просто беру сейчас на локальном у себя вставляю редактор ваш код из первого примера — нажимаю «опубликовать», получаю на выходе текст без br после заголовка. Т.е. идет закрывающий тег h5, сразу за ним открывающий список.
avatar
Да, действительно так работает. Но вот если так:
<h4>tyuytu</h4>
<h5>yuyyu</h5>
<ul>
	<li>tryu</li>
</ul>
<ol>
	<li>tyyyytu</li>
</ol>

то после заголовка H5 ставится BR

Rстати в исключения ещё следует добавить и теги «blockquote», «pre» и «img» (с изображением нужно для того что бы когда ставили выравнивание слева или справа то картинку обтекал текст, ну и всё таки для XHTML 1.0 Strict правильно не align=«left/right», а style=«float: left/right;»
avatar
Хотя с вырезыванием br для img возможно не прав, зависит от того кто как вставляет картинку, если так:
<img src="http://livestreet/uploads/images/0/0/0/0/0/1/2009/11/27/2a1906.jpg" align="left" alt="" />
текст текст текст

то да появится br и будет мешать.

Ну а если так вставлять:
<img src="http://livestreet/uploads/images/0/0/0/0/0/1/2009/11/27/2a1906.jpg" align="left" alt="" />текст текст текст

то всё хорошо
avatar
Это уже настроено. В Text.class.php.
avatar
И это настройка не того, о чем сейчас идет речь.
avatar
странно если в CODE писать <br /> то он отображается, а если писать <br/> (без пробела перед слешем) то заменяется на перенос строки.

ну и спец. коды такие как &соpy; почему то в CODE заменяются на ©.
avatar
После списка да, проблему вижу. После заголовков у меня br не появляется — взял ваш код для тестирования. Убедитесь, что весь код, о котором я писал, перенесли.
avatar
Внес изменения в код (ревизия 617) и update в статью.
avatar
Вот бы кнопки вставки списков ul и ol сделать как в редакторе для vbulletin, потому что текущая реализация жутко неудобная, а домохозяйкам и непонятная.
avatar
Где-то проскакивал топик с другим оформление редактора.
avatar
Там изменено только оформление, поведение такое же.
avatar
а как можно добавить списки и заоловки в админпанель редактирования страниц? пробовал по аналогии не работает — отображается но теги не вставляет
avatar
Помогите плз. Следовал инстукциям, всё получилось, но не знаю где напортачил, от чего мне выдает в коментах информацию об ошибке: Fatal error: Smarty error: [in actions/ActionBlog/comment.tpl line 148]: syntax error: invalid attribute name: '$showShortPanel' (Smarty_Compiler.class.php, line 1545) in /home/www/z128665/htdocs/classes/lib/external/Smarty-2.6.19/libs/Smarty.class.php on line 1092

Облазил все файлы которые указаны в инве… и ни чего…
Что мне делать?
avatar
сделал все как написано, но ничего не изменилось, никаких ошибок, ничего…
версия — 3.1
в чем может быть дело?
avatar
альтернатива
livestreet.ru/blog/wishlist/3654.html
avatar
спасибо, попробую это
avatar
имхо слово Заголовок в редакторе лучше заменить на h h1 h2, а то выглядит как то не очень слово Заголовок весь в окно не влазиит.
avatar
Также как и слово Списки, кстати что-то у меня не получилось что-то обновить редактор, внешне он изменился, но был неработоспособен почему то, вернул все назад.
avatar
Таже проблема…
avatar
У меня уже нет этой проблемы, давно обновился ))
avatar
у меня всё заработало кроме
<li> <ul>
avatar
Извиняюсь за тупой вопрос, но все же. При нажатии Enter нет переноса на новую строку. В чем тут может быть дело или так и должно быть?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.