Визуальный редактор

В данной статье рассмотрим встроенный HTML редактор, основные возможности и режим "источник".

• Встроенный HTML редактор, режим "источник"
• Как добавить таблицу
• Как разместить ссылку на скачивание документа (файла)
• Как добавить маркированный список
• Как добавить заголовок
• Как добавить изображение сбоку текста
• Вывод изображения большего размера при нажатии на изображение
• Как загрузить фотографию в текст страницы описания или новости
• Установка якоря на странице
• Вывод всплывающего окна с текстом при нажатии на ссылку
• Как сделать развернутый текст
• Как добавить панораму через "Источник"

 

Встроенный HTML редактор, режим "источник"

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

Рисунок 1.

Режим источник, о котором мы сейчас поговорим - это кнопка на панели встроенного редактора, находится в верхнем ряду слева (рис.2).

Рисунок 2.

При работе с текстом вы можете работать в 2х режимах:

• Первый режим, стандартный или "визуальный", где вы можете изменять стили и внешний вид текста путем команд на панели (аналог редактирования текста в MS Office, к примеру в Word). В инструкции будет рассмотрен именно этот режим.
• Второй режим - это режим "Источник", который переключает текст в чистый языка разметки HTML, менее удобный, но дает гораздо больше контроля над стилями.

Важно

Для работы в режиме "Источник" необходимо иметь навыки работы с языком разметки HTML.

Внимание!

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

Первый режим. Добавим текст "Привет, мир!", слово "мир!" выделим жирным, используя встроенный HTML редактор. Готово, все просто (рис. 3).

Рисунок 3.

Второй режим. Переключимся в режим "Источник", посмотрим что получилось (рис 4).

Рисунок 4.

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

 

Как добавить таблицу

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

В данном разделе мы рассмотрим 2 варианта, как добавить таблицу в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование):

• Добавление таблицы в текст через встроенный HTML-редактор
• Добавление таблицы в текст через чистый HTML

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Дизайн" - "Параметры" - "Основные") (рис.5).

Рисунок 5.

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

Так выглядит страница "О магазине" в данный момент:

Рисунок 6.

Вы хотите добавить на страницу, к примеру, следующую таблицу:

При первой покупке	Скидка 3%
Постоянным клиентам	Скидка 5%
Оптовым покупателям	Скидка 15%

 

Добавление таблицы в текст через встроенный HTML-редактор

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

Рисунок 7.

Далее в тексте ставим курсор на то место, куда нужно вставить таблицу. Затем на панели редактора выбираем иконку "Таблица".

Рисунок 8.

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

Указываем нужные настройки и нажимаем кнопку "OK"

Рисунок 9.

Готово, таблица добавлена.

Рисунок 10.

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

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

Рисунок 11.

Всё готово.

Рисунок 12.

 

Добавление таблицы в текст через чистый HTML

Существует также альтернативный вариант добавления таблицы в текст - добавление непосредственно HTML-вёрстки таблицы в нужное место в общей HTML-вёрстке. 

Внимание!

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

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

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

Рисунок 13.

Затем переключаемся в режим "Источник" и находим нашу "метку".

Рисунок 14.

Теперь в место маркера мы вставляем HTML-код нашей таблицы. 

Например, такой:

Получится вот так:

Рисунок 15.

При переключении обратно из режима "Источника" в режим визуализации мы должны увидеть таблицу. 

Рисунок 16.

Если таблицу видно, значит, всё в порядке. 

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

Рисунок 17.

Внимание

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

 

Как разместить ссылку на скачивание документа (файла)

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

Заметка

Для включения In-place редактирования (возможности редактирования через клиентскую часть) в настройках Вашего магазина должна стоять соответствующая галочка ("Дизайн" - "Параметры" - "Основные") (рис.18). 

Рисунок 18.

Для того чтобы разместить ссылку на скачивание документа в тексте страницы, необходимо выполнить следующие действия:

Перейдите в режим редактирования страницы, осуществив клик на любом месте текста. Откроется панель редактирования и нажмите кнопку "Вставить и редактировать ссылку" (рис.19).

Рисунок 19.

Открывается окно выбора файла, где необходимо нажать “Выбор на сервере” (рис.20).

Рисунок 20.

Далее открывается окно менеджера файлов, через который Вы подгружаете свой файл следующим образом:

Нажимаем "Загрузить файл", затем "Выбрать файлы" (рис.21).

Рисунок 21.

Выбираем файл на компьютере и нажимаем кнопку "Загрузить" (рис.22).

Рисунок 22.

Осуществите двойной клик на файле в списке - ссылка на него автоматически подставится в нужное поле (рис.23).

Рисунок 23.

Мы получили ссылку на файл. Копируем её, возвращаемся к HTML-редактору статической страницы и прописываем ссылку (в режиме "Исходник") в тегах <a href=” ”>...</a>

Например, получится вот так:

Рисунок 24.

Нажмите "ОК", затем сохраните изменения, кликнув на кнопку с галочкой в правом нижнем углу окна редактирования.

Рисунок 25.

Ссылка на скачивание размещена на странице, и нажатием на неё мы можем скачать загруженный на сервер файл.

Рисунок 26.

Заметка

Иногда, в зависимости от браузера и его настроек по умолчанию, при нажатии на гиперссылку "Скачать прайс-лист" скачивание не происходит, а лишь открывается пустое окно в новой вкладке браузера. Чтобы этого избежать, разместите в теге гиперссылки атрибут download="", который в любом случае принудит  файл скачаться.

В таком случае гиперссылка будет выглядеть следующим образом:

 

Как добавить маркированный список

В данном разделе рассмотрим, как добавить маркированный список в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Дизайн" - "Параметры" - "Основные") (рис.27).

Рисунок 27.

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

"Наши преимущества:
- Доставка по городу "день в день"
- Круглосуточный приём заказов
- Оплата любым удобным способом
- Бонусы за покупку"

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

Рисунок 28.

Введите нужный вам текст, переходя на следующую строку путём нажатия кнопки "Enter" на клавиатуре (тире при вводе пунктов списка использовать не нужно) (рис.29).

Рисунок 29.

Выделите текст, из которого нужно сделать список, мышкой и нажмите одну из двух кнопок на панели редактора (в зависимости от того, какой список вы хотите создать - с нумерацией или без). Для примера, выберите список без нумерации (рис.30).

Рисунок 30.

Сохраните изменения, кликнув на кнопку с галочкой (рис.31).

Рисунок 31.

На этом настройки списка завершена. В клиентской части он будет отображаться следующим образом (рис.32).

Рисунок 32.

 

Как добавить заголовок

В данном разделе рассмотрим, как добавить заголовок в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Дизайн" - "Параметры" - "Основные") (рис.33).

Рисунок 33.

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

Так выглядит страница "О магазине" со списком в данный момент:

Рисунок 34.

Перейдите в режим редактирования страницы, осуществив клик на любом месте текста. Откроется панель редактирования. Выделите мышкой нужный вам фрагмент текста (в нашем примере - фразу "Наши преимущества") и в выпадающем списке на панели редактирования (рис. 35) выберите, к примеру, "Подзаголовок 2 уровня".

Рисунок 35.

Сохраните изменения, кликнув на кнопку с галочкой справа. В клиентской части он будет отображаться следующим образом (рис.36).

Рисунок 36.

По такому же принципу можно добавлять заголовки разного размера - от "Заголовок 1" до "Заголовок 4". В коде сайта такие заголовки будут предствлены, соответственно, тегами h1 - h4.

 

Как добавить изображение сбоку текста

В данной статье мы рассмотрим, как добавить изображение в текст (на примере статической страницы) при редактировании текста прямо в клиентской части магазина (In-place редактирование).

Заметка

Для включения In-place редактирования в настройках Вашего магазина должна стоять соответствующая галочка ("Дизайн" - "Параметры" - "Основные") (рис.37).

Рисунок 37.

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

Так выглядит страница "О магазине" со списком в данный момент:

Рисунок 38.

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

Рисунок 39.

Нажмите "Выбор на сервере" (рис.40).

Рисунок 40.

Нажмите "Загрузить файл", затем - "Выбрать файлы" (рис.41).

Рисунок 41.

Выберите на вашем локальном компьютере файл изображения и нажмите "Открыть" (рис.42).

Рисунок 42.

Нажмите "Загрузить" (рис.43).

Рисунок 43.

Осуществите двойной клик на нужном вам изображении, которое было загружено. В открывшемся окне выберите параметр "Выравнивание" со значением "По левому краю" (чтобы текст находился справа от изображения). Также, при необходимости, вы можете указать такие параметры, как ширина, высота, граница и отступы (в данном примере мы оставим данные значения по умолчанию). Нажмите кнопку ОК (рис.44).

Рисунок 44.

Сохраните изменения, кликнув на кнопку с галочкой. Всё готово. Страница теперь выглядит следующим образом:

Рисунок 45.

 

Вывод изображения большего размера при нажатии на изображение

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

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

Обычно, на любом другом сайте, такое можно было сделать с помощью стороннего скрипта, например "fancybox", и его нужно отдельно подключать, чтобы с ним работать. Так вот, для удобства скрипт "fancybox" ( http://fancybox.net/ ) уже интегрирован в движок и мы будем просто с ним работать, подключать отдельно его не нужно.

Мы будем работать с текстом, например описания товара, в панели администрирования магазина в HTML редакторе, который переведён в режим "Источник".

И так, чтобы сделать такую умную картинку, необходимо:

Шаг 1. 

К примеру картинка в HTML выглядит так:

 

Шаг 2.

Нужно её обтянуть, чтобы было так:

Где: big1.jpg - это большая фотография, small1.jpg - маленькая фотография

Получится ПРОСТО ссылка на фотографию.

 

Шаг 3.

Вся магия в дополнительном параметре у ссылки: data-plugin="fancybox" 

Добавляем её нашему тегу <a> и в итоге получится так:

 

Теперь при нажатии на картинку small1.jpg откроется картинка big1.jpg в окне. 

Рисунок 46.

При нажатии получиться вот так:

Рисунок 47.

Пробуйте.

Что бы показывать несколько фотографий, использовать стрелочки (влево, вправо), нужно объеденить их в группы добавив атрибут rel="group1".

Чтобы получилось так:

 

Чтобы добавить описание фотографии, нужно добавить атрибут title="Описание фотографии 1".

Получится так:

 

Рисунок 48.

 

Как загрузить фотографию в текст страницы описания или новости

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

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

И так, добавление картинки разбито на 6 простых шагов.

Для начала переходим в панель администрирования, в редактирование товара (для примера выберем текст описания товара)

В тексте описания поставьте курсор в место где должна быть картинка. По умолчанию курсор стоит в начале текста и картинка добавиться именно туда. 

Нажмите иконку "Изображение" на панели редактора (рис.49).

Рисунок 49.

В открывшемся окне во вкладке "Данные об изображение" нажмите кнопку "Выбор на сервере", откроется 2ое дополнительное окно. (рис. 50).

Рисунок 50.

Во втором дополнительном окне нам нужно либо выбрать картинку что уже есть на сервере, к примеру была загружена ранее, либо загрузить новую картинку.

Тут есть 2 варианта:

• Если нужно загрузить совсем новую картинку, то нажмите "Загрузить файл", выберите файл и нажмите "Загрузить", после загрузки нажмите "Выбрать" (рис.51).

Рисунок 51.

• Если картинку уже загрузили ранее, к примеру вам нужно было вставить одну и туже картинку 2 раза и вы уже загрузили её подобным способом ранее, то просто выбираете из тех что есть в списке, затем так же нажмите кнопку "Выбрать" (рис. 52).

Рисунок 52.

Окно закроется, и в окне что открылось ранее будет отображена картинка, которую мы выбрали (или загрузили), тут ничего делать не нужно, просто нажмите "Ок" (рис. 53).

Рисунок 53.

Картинка добавилась. В тексте выглядит как представлено на (рис. 54). 

Рисунок 54.

Осталось только сохранить изменения описания , нажав кнопку "Сохранить". 

 

Установка якоря на странице

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

Как это сделать, мы постараемся сейчас разъяснить.

Заметка

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

• Создание HTML якоря на странице
• Добавление ссылки на якорь

 

Создание HTML якоря на странице

Обратите внимание, добавлять якорь нужно в HTML виде в режиме Источник. Подробнее про режим источник здесь.

Для создания якоря следует сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. 

Например, вот так:

<a name="one"></a>

Где one - это название якоря, а атрибут href можно не указывать вовсе. Этот код ссылки нужно вставить туда, куда нам нужно перейти. К примеру, в начале каждой главы или абзаца с нужной информацией. При нажатии на ссылку которую мы добавим позже, пользователя будет перебрасывать именно в ту часть текста где расположен код якоря.

Якорей на странице может быть несколько.

Важно

Имена для якорей должны быть уникальными (разными).

Заметка

Данные теги нужно помещать непосредственно перед заголовком пункта, к которому переходим. Помещать текст в теги <a></a> не нужно, так как в таком случае текст будет отображаться как ссылка.

 

Добавление ссылки на якорь

Итак, якорь мы только что создали. Теперь нам нужно добавить ссылку на него, точнее, ссылку, при нажатии на которую пользователя бы перебрасывало к месту якоря. 

Сразу отметим, что для ссылки внутри одной страницы и ссылки на разных страницах с якорями формируются по разному. 

Для ссылок на якори внутри одной страницы

Для этого нам понадобиться в оглавление или подходящий для этого раздел документа, добавить обычную ссылку вида:

<a href="http://вашдомен.ru/pages/название_статической_страницы#one" target="_self">Ваш текст</a>

Заметка

target="_self" загружает страницу в текущее окно.

target="_blank" загружает страницу в новое окно браузера.

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

Заметка

Можно использовать как сокращённый вариант - всё что после домена и слеша ( / ), так и полный путь до страницы вместе с доменом.

Например, если страница на которой мы разместили якоря находится тут: http://вашдомен.ru/pages/название_статической_страницы#one, то подойдут варианты:

<a href="./pages/название_статической_страницы#one" target="_self">Ваш текст</a>

<a href="http://вашдомен.ru/pages/название_статической_страницы#one" target="_self">Ваш текст</a>

В первом варианте, важно отметить, в ссылке обязательно перед слешем " / " нужно ставить точку.

Для ссылок на якори на разных страницах

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

Например:

<a href="http://вашдомен.ru/pages/название_статической_страницы#one" target="_self">Ваш текст</a>

Эта ссылка "http://вашдомен.ru/pages/название_статической_страницы#one" означает, перейти на адрес http://вашдомен.ru/pages/название_статической_страницы к якорю #one

Т.е. при нажатии на ссылку произойдет переход по ссылки и последует "переброс" по документу к нужному якорю.

Всё просто. Пробуйте.

 

Вывод всплывающего окна с текстом при нажатии на ссылку

В движке AdVantShop возможно сделать так, что при нажатии на ссылку открывалось специальное всплывающее окно небольшого размера с затемнением фона.

• Основные настройки
• Примеры
• Два и более всплывающих окна

 

Основные настройки

Используя интегрированный скрипт http://fancybox.net, мы соорудим HTML конструкцию из ссылки и пары div чтобы всё заработало.

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

Для начала создадим ссылку, которая будет видна клиенту, и при нажатии на которую будет показываться окно, чтобы сделать такую ссылку нужно для обычной ссылки прописать дополнительный атрибут, а именно добавить data-plugin="fancybox"  т.е. обычная ссылка в HTML выглядит так:

а ссылка которая нужна нам, будет выглядеть так:

Получится примерно, так:

В этом примере мы назвали внутренний div как dostavka, т.е. код получился id="dostavka", можно придумать любое название, важно чтобы оно было указанно в верхней ссылке, и не было два и более одинаковых названий на странице. 

И так, разместим код на любой статической странице, и посмотрим что получилось (рис. 55).

Рисунок 55.

Рисунок 56.

Получилась ссылка при нажатии на которую показывается окно с текстом, супер.

Пример 2

Давайте улучшим наше всплывающее окно, добавим в текст картинку. 

Однако, добавить картинку напрямую в скрытый элемент не получится, по этому вы можете временно убрать у верхнего div, его стиль display:none; тогда элемент станет виден в режиме визуализации (не в режиме источник), добавьте картинку в нужное место и затем верните элементу его display:none;

Получится примерно, так:

Тестируем

Рисунок 57.

Получилось отлично. 

Так же, всплывающее окно можно использовать для вывода табличных данных, например вот так (рис. 58)

Рисунок 58.

Два и более всплывающих окна

Чтобы вставить 2 и более окон на одну страницу, разместите код друг за другом, но обязательно укажите уникальный id для элементов, в противном случае по всем ссылкам будет открываться только одно окно.

Получится примерно, так:

 

Как сделать развернутый текст

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

Для этого в режиме "источник" пропишите следующий код: (рис.59):

<readmore data-max-height="150" data-more-text="Показать больше" data-less-text="Свернуть" expanded="true" data-speed="500"> Тут основной контент </readmore>

data-max-height - высота блока при свернутом состоянии

data-more-text - текст кнопки, которая отображается снизу блока, когда блок свернут

data-less-text - текст кнопки, которая отображается снизу блока, когда блок развернут

data-expanded - первоначальное состояние блока

data-speed - скорость анимации свертывания и развертывания блока

Рисунок 59.

Рисунок 60.

Как добавить панораму через режим "Источник"

В режиме "Источник" на любую страницу: в пунктах меню, на главной, на странице товара - можно добавить панораму.

Рассмотрим как добавить панораму на страницу "Контакты". 

Предварительно получаем код карты панорамы в картах Яндекс или Google. Переходим в карты, вбиваем адрес, выбираем "Панорама" (рис.61).

Рисунок 61.

 Далее нажимаем на кнопку ссылки, выводится окно с кодом карты. Копируем код "Виджет с картой" (рис.62).


Рисунок 62.

Переходим на страницу "Контакты". Если включен режим in-place редактирования, то на странице будет доступен режим редактирования, в котором переходим в режим "Источник" (рис. 63).

Рисунок 63.

Заметка

ТДля размещения кода можно перейти в перейти в панели администрирования в раздел "Дизайн", далее "Страницы и блоки", выбрать подраздел Страницы, найти необходимую страниу и перейти в режим редактирования, в режим "Источник"

Откроется окно вставки кода, где и размещаем скопированный код и сохраняем настройки (рис.64).

Рисунок 64.

Выходим из режима in-place редактирования и проверяем как выглядит страница с панорамой (рис.65).


Рисунок 65.

Всё готово. В данной инструкции мы рассмотрели встроенный HTML редактор, основные возможности и режим "источник".