Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Настройки визуального редактора Tiny MCE

Следить
Главная
09:30
09 дек
#
Разработчик написал:
В движке Impera CMS (версия после 131123) появилась новая функция - настройки визуального редактора Tiny MCE. Смотрите в админпанели страницу "настройки > Визуальный редактор" (та же страница на демо сайте, логин admin, пароль 123).


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

Хотелось бы отметить один нюанс работы редактора. У редактора есть настройки фильтрации тех тегов, а также их атрибутов (опций), что считаются вами допустимыми в разметке сайта. Редактор производит фильтрацию всякий раз, когда: 1) текст впервые подгрузился в редактор, 2) вы что-то начали редактировать, будь то прямым вводом текста или через буфер обмена, 3) что-то изменили с помощью прямого редактирования HTML-разметки текста, 4) финальный текст отправили на сохранение. Нежелательные теги изымаются очень эффективно, важно лишь настроить список правил, их синтаксис будет рассмотрен ниже.


Подключаемые плагины Пишутся строчными буквами и перечисляются через запятую. Имена и назначение плагинов:

  • advimage - расширение работы с картинками (редактирование параметров)
  • advlink - расширение работы со ссылками (редактирование параметров)
  • advhr - расширение работы с горизонтальными линиями (редактирование параметров)
  • emotions - смайлы
  • fullscreen - переключение/возврат в полноэкранный режим
  • fullpage - работа с параметрами страницы (осторожно! добавляет в разметку теги html, head, body)
  • inlinepopups - замена модальных окон выпадающими DIV-аналогами
  • insertdatetime - дата, время
  • media - работа с медиа файлами (QuickTime, видео, swf и т.п.)
  • pagebreak - вставка разрыва страницы (моделирование "читать далее" для CMS)
  • paste - вставка из буфера обмена
  • searchreplace - поиск, замена текста
  • table - работа с таблицами
  • style - работа с атрибутами стиля
  • visualchars - вставка специальных символов
  • xhtmlxtras - вставка журналистских тегов (цитирование и т.п.)
  • layer - позиционируемые слои
  • nonbreaking - неразрывный пробел
  • wordcount - показывает в строке состояния число слов в тексте

Важно: в поставку редактора могут входить (или позже установлены вручную) и другие плагины, имена которых не перечислены здесь. Имена всех плагинов можно взять по списку имен папок, размещенных в папке http://сайт/admin/js/tiny_mce/plugins.


Строки кнопок Здесь пишутся строчными буквами имена необходимых кнопок на панели инструментов редактора. Имена кнопок перечисляются через запятую. Между перечислением допустимо использовать символ вертикальной черты, чтобы визуально отделить блоки разноцелевых кнопок. Имена и назначение кнопок:

  • bold - полужирный
  • italic - курсив
  • underline - подчеркнутый
  • strikethrough - перечеркнутый
  • justifyleft - выравнивание влево
  • justifycenter - выравнивание по центру
  • justifyright - выравнивание вправо
  • justifyfull - выравнивание по ширине
  • bullist - маркированный список
  • numlist - нумерованный список
  • outdent - уменьшить отступ
  • indent - увеличить отступ
  • cut - вырезать в буфер обмена
  • copy - скопировать в буфер обмена
  • paste - вставить из буфера обмена
  • pastetext - вставить как текст из буфера обмена (если подключен плагин paste)
  • pasteword - вставить из буфера обмена MS Office Word (если подключен плагин paste)
  • selectall - выделить все (если подключен плагин paste)
  • undo - отменить изменение
  • redo - вернуть изменение
  • link - дать ссылку
  • unlink - отменить ссылку
  • image - вставить/редактировать изображение
  • smimage - менеджер изображений (если подключен плагин smimage)
  • cleanup - почистить кривой код
  • help - справка
  • code - редактировать html-код
  • hr - горизонтальная линия
  • advhr - горизонтальная линия (расширенные параметры)
  • tablecontrols - редактирование таблиц (если подключен плагин table)
  • removeformat - удалить форматирование
  • sub - нижний индекс
  • sup - верхний индекс
  • formatselect - выбрать форматирование
  • styleselect - выбрать стиль
  • fontselect - выбрать шрифт
  • fontsizeselect - размер шрифта
  • forecolor - цвет текста
  • forecolorpicker - выбор цвета текста
  • backcolor - цвет фона
  • backcolorpicker - выбор цвета фона
  • charmap - таблица символов
  • visualaid - показать невидимые элементы
  • anchor - ссылочный якорь
  • newdocument - новый документ
  • blockquote - кавычки
  • styleprops - редактировать атрибуты стиля (если подключен плагин style)
  • visualchars - специальный символ (если подключен плагин visualchars)
  • search - найти (если подключен плагин searchreplace)
  • replace - заменить (если подключен плагин searchreplace)
  • pagebreak - разрыв страницы (если подключен плагин pagebreak)
  • media - медиа файл (если подключен плагин media)
  • insertdate - дата (если подключен плагин insertdatetime)
  • inserttime - время (если подключен плагин insertdatetime)
  • fullscreen - редактировать в полноэкранном режиме (если подключен плагин fullscreen)
  • fullpage - редактировать параметры страницы (если подключен плагин fullpage)
  • emotions - смайлы (если подключен плагин emotions)
  • cite - цитировать (если подключен плагин xhtmlxtras)
  • ins - врезка (если подключен плагин xhtmlxtras)
  • del - устаревшее (если подключен плагин xhtmlxtras)
  • abbr - аббревиатура (если подключен плагин xhtmlxtras)
  • acronym - инициалы, акроним (если подключен плагин xhtmlxtras)
  • insertlayer - вставить слой (если подключен плагин layer)
  • absolute - абсолютное / относительное позиционирование слоя (если подключен плагин layer)
  • moveforward - поднять слой выше (если подключен плагин layer)
  • movebackward - поднять слой выше (если подключен плагин layer)
  • nonbreaking - неразрывный пробел (если подключен плагин nonbreaking)


Список допустимых тегов Здесь указывается список допустимых тегов html-разметки и опций (атрибутов) этих тегов. Теги задаются в виде определенных правил и перечисляются через запятую. Удовлетворяющие этим правилам теги и их опции будут сохранены, остальные изымаются визуальным редактором из финальной html-разметки. При написании правил можно использовать следующие специальные символы:

  • @ - следуемое за этим символом правило применяется ко всем правилам после него, например @[attr1|attr2] разрешит опции attr1 и attr2 для всех элементов, а в этом примере element1, @[attr1|attr2], element2, element3 опции attr1 и attr2 будут разрешены только для element2 и element3
  • , - разделяет правила в списке, например p,div,a[href|name],-span,-strong
  • / - разделяет синонимы тега, например i/em, при этом все синонимичные теги будут заменены первым из списка синонимов
  • | - разделяет перечисление позволенных опций тега, например [href|title|alt]
  • [ - начало нового перечисления позволенных опций тега
  • ] - конец перечисления опций тега
  • ! - указывает на обязательную опцию, например [!href], если такая не существует в теге, он изымается
  • = - устанавливает опцию и ее значение, если такая опция тега не существует, например [target=_blank]
  • : - устанавливает опцию тега в конкретное значение независимо от ее текущего значения, например [border:0]
  • < - определяет список допустимых значений опции, например [target<_blank?_self], при остальных значениях опция изымается
  • ? - разделяет допустимые значения опции, смотрите выше
  • + - делает тег незакрытым (убирает закрывающий тег), если тег не имеет вложенных тегов, например +a
  • - - разрешает удаление тегов с пустым содержимым наподобие <span></span>, например -span
  • # - разрешает наполнение кодом неразрывного пробела &nbsp; всех тегов с пустым содержимым, например #p
  • {$uid} - генерирует уникальное значение, например установить уникальный идентификатор p[id:{$uid}]
  • подстановочные символы - такие как *+? - могут использоваться в именах тегов и опций, например h*[font:arial] для тегов с буквы h


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


Валидация HTML Данным флажком полностью отключается проверка html-разметки на допустимые теги.


Свой CSS При отключенном флажке визуальный редактор будет использовать стили из текущего шаблона клиентской стороны сайта (при этом предполагается, что в шаблоне есть следующий главный стилевой файл http://сайт/design/ваш_шаблон/css/style.css. Если такого файла нет в шаблоне или данный флажок включен, тогда редактор будет использовать свой собственный стилевой файл, имена классов которого скорее всего не будут совпадать с именами в стилях вашего шаблона.

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

  • @import url('файл-часть-1.css');
  • @import url('файл-часть-2.css');
  • @import url('файл-часть-3.css');
  • @import url('файл-часть-4.css');
  • и так далее...

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

10:09
11 дек
#
?
EraUa написал:

То ли я куда-то не туда смотрю, то ли у меня нет этой страницы настройки

21:11
23 мая
#
?
Андрей написал:

Подскажите, как разрешить вставку голосований с Вконтакте?

Голосование имеет код:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?113"></script>

<!-- Put this div tag to the place, where the Poll block will be -->
<div id="vk_poll"></div>
<script type="text/javascript">
    VK.Widgets.Poll("vk_poll", {width: 300}, "80304968_610e0ab0536d68dc32");
</script>
15:54
24 мая
#
Разработчик написал:

Просто вставить код в желаемое место шаблона. Покажу на примере новой версии шаблона Electronics. Предположим, хотелось бы вставить опросник в самый конец правой колонки сайта. Открываем на редактирование файл макета страницы (это index.tpl), ищем где оканчивается контейнер правой колонки и перед окончанием вставляем код опросника. Если в коде существуют фигурные скобки слитно с кодом, внутри скобок добавляем пробелы или переводы строк, иначе шаблонизатор Smarty пытается обработать такие скобки как начало своих тегов, что приводит к ошибке компиляции шаблона и белому экрану.

Пример смотрите ниже: вставленный опросник помечен цветом, троеточием обозначены некие фрагменты кода.

...
<!DOCTYPE html>
    <html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
        ...
        <body {$body_params|default:""}>
            <div id="wrapper1">
                <div id="wrapper2">
                    <div id="wrapper3">
                        {* <!-- ==================== шапка сайта ==================== --> *}
                        ...
                        {* <!-- ==================== центральная часть ==================== --> *}
                        <div id="columns">
                            ...
                            {* <!-- ==================== правая колонка ==================== --> *}
                            <div class="column" id="right_column">

                                {* <!-- подкатегории --> *}
                                ...
                                {* <!-- фильтр товаров --> *}
                                ...
                                {* <!-- состояние корзины --> *}
                                ...
                                {* <!-- бренды --> *}
                                ...
                                {* <!-- товары (специальные) --> *}
                                ...

                                {* <!-- опросник --> *}
                                <script type="text/javascript" src="//vk.com/js/api/openapi.js?113"></script>
                                <div id="vk_poll"></div>
                                <script type="text/javascript">
                                    VK.Widgets.Poll('vk_poll', { width: 300 }, 'идентификатор_опросника');
                                </script>
                            </div>
                            <div class="clearblock"></div>
                        </div>
                    </div>
                    {* <!-- ==================== подвал сайта ==================== --> *}
                    ...
                </div>
            </div>
            {* <!-- ==================== всплывающие элементы ==================== --> *}
            ...
        </body>
    </html>
...


Еще придется подобрать значение параметра width опросника, так как правая колонка скорее всего имеет другую ширину (например у шаблона Electronics - 241 px), а не 300 пикселей.

22:18
26 мая
#
?
Андрей написал:

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

А хотелось бы иметь возможность вставлять голосования просто в текстовое поле на тематических страницах. Попросту говоря, в поля, редактируемые при помощи визуального редактора Tiny MCE.

Насколько я понимаю такая возможность есть - в разделе "Настройки" - "Визуальный редактор". Вот только что и где прописать...?

23:28
26 мая
#
Разработчик написал:

Думаю, по скриншотам поймете. Страница админпанели "настройки -> Визуальный редактор".



На той же странице чуть ниже.



Осталось взять код скрипта и с помощью кнопки HTML визуального редактора вставить этот код в тело необходимой публикации. В код внесено исправление в виде неразрывного пробела &nbsp; внутри контейнера vk_poll, чтобы контейнер оказался непустым. Иначе в настройках редактора (а именно знаком "минус" правила -div ...) предписано удалять пустые div-ы. В принципе можно было бы просто удалить знак "минус" из этого правила.

<script type="text/javascript" src="//vk.com/js/api/openapi.js?113"></script>
<div id="vk_poll">&nbsp;</div>
<script type="text/javascript">
    VK.Widgets.Poll('vk_poll', { width: 300 }, '80304968_610e0ab0536d68dc32');
</script>
15:14
27 мая
#
?
Андрей написал:

Все получилось!

Отдельное спасибо разработчику за такую поддержку!

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


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


Хостинг для сайта

Хостинг для интернет магазина

Svai.net

Украина
г. Черкассы
5+ Заказать

TutHost.ua

Украина
г. Киев
Заказать

Mirohost.net

Украина
г. Киев
? Заказать

HyperHosting.com.ua

Украина
г. Винница
i подробнее Заказать

Agava.ru

Россия
г. Москва
Заказать

Ukraine.com.ua

Украина
г. Киев
5 Заказать
Импераготовасотрудничатьс провайдерами Важно Учтите Этот список перечисляет лишь некоторых хостинг-провайдеров, у которых существуют специальные тарифные планы для интернет магазинов, а сам список не означает, что другие провайдеры чем-то хуже.

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

Демо Главная Хронология Соглашение Материалы Контакты