вторник, 26 марта 2013 г.

Редактирование страниц (8): Редактирование HTML-кода

Code Mirror - интегрированный редактор HTML-кода в Composite C1
После небольшого перерыва :), продолжим рассматривать работу с редактором страниц.

С работой в визуальном редакторе мы уже ознакомились, теперь пришел черед немного изучить возможности редактирования HTML страниц.

Как я уже говорил, для редактора кода, в т.ч. HTML-кода используется интегрированный Code Mirror. Его пользовательский интерфейс адаптирован для работы в админке и расширен необходимыми для Composite C1 CMS возможностями.


Редактор кода


Вы помните, что для редактирования HTML-кода страницы, вам нужно:
  1. Открыть страницу в админке (кнопка "Изменить страницу" на панели кнопок)
  2. В визуальном редакторе переключится в режим "Код" (кнопка "Код" в визуальном редакторе"
Вы на месте.

Редактирование HTML-кода в Composite C1

На данном этапе IntelliSense при редактировании не поддерживается, но есть сторонние решения для этих целей, ведь Composite C1 CMS развивается и усилиями сообщества тоже.



Например, пакет расширения AutoComplete (англ.). (С последней версией я не работал, но некоторые предыдущие версии я пробовал - и они меня вполне устраивали.)


Кнопка "Добавить"


Пункты меню кнопки Добавить в редакторе страниц в Composite C1

Во-первых, кнопка "Добавить" в редакторе кода дает вам возможность добавить:
  • URL страницы - формате Composite C1: ~/page(9bdb7b6d-4e4f-41c9-bcc3-95b20bd8d796)
  • URL изображения из медиа-архива - тоже в формате Composite C1: ~/media(ce4a5c82-e727-44c5-9769-e890946a81fc)
  • URL медиа-файла из медиа-архива - также как и изображения
Их вы можете использовать в ваших ссылках и вставках изображений и т.п.:

<a href="~/page(9bdb7b6d-4e4f-41c9-bcc3-95b20bd8d796)" />
<a href="~/media(ce4a5c82-e727-44c5-9769-e890946a81fc)" />
<img src="~/media(ce4a5c82-e727-44c5-9769-e890946a81fc)" />

Во-вторых, вы можете указывать относительный путь к файлам на сайте с помощью:
  • Frontend URL: напр., /Frontend/Styles/layout.css
Их вы скорее всего будете использовать для подключения стилей, скриптов, графики:

<link rel="stylesheet" href="~/Frontend/Styles/layout.css" type="text/css"/>

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

В-третьих, вы можете добавлять непосредственно XML-код функций с помощью пункта меню "Добавить":
  • Код функции
Кому-то будет гораздо удобнее и быстрее  вставлять функции как код в редакторе кода, напр.:

<f:function name="Composite.Navigation.LanguageSwitcher">
  <f:param name="Mode" value="TranslatedOrHomePages" />
  <f:param name="ShowCurrent" value="False" />
  <f:param name="Format" value="NativeName" />
</f:function>
<f:function name="Layout.Navigation.TopLinks" />
<f:function name="Layout.Navigation.Menu" />

чем функции в визуальном редакторе.


Кнопка "Форматировать"


Кнопка "Форматировать" просто форматирует код: дерево элементов перестраивается, удаляются "лишние" элементы и т.п.

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



Кнопка "Дизайн"


Кнопка "Дизайн" переключает вас обратно в режим визуального редактора.


Читайте также в этом блоге:

2 комментария:

  1. Проблема с редактором, при вставке тега < noindex>, выходит ошибка:
    Ошибка в исходном коде: line 30 column 25: < noindex> is not recognized!

    ОтветитьУдалить
  2. Этот специфический тег, введенный Яндексом, совершенно правильно не проходит валидацию.

    Из Википедии:

    Совместимость

    Поскольку тег noindex не входит в официальную спецификацию языка HTML, то большинство HTML-валидаторов считает его ошибкой. Потому для того, чтобы сделать код с noindex валидным, рекомендуется использовать следующую конструкцию:

    <!--noindex-->Текст или код, который нужно исключить из индексации <!--/noindex-->

    http://ru.wikipedia.org/wiki/Noindex

    ОтветитьУдалить