Поиск сообщества

Классы кнопок, описанные в этой инструкции, могут быть применены к элементам, например как input[type="submit"] или кнопки, таким образом, чтобы пользователь мог взаимодействовать в этим. Как минимум, кнопка должна получить базовый класс ipsButton, а также класс размера и класс стиля (описание ниже). Стили кнопок ipsButton_normal Нормальная кнопка ipsButton_primary Основная кнопка ipsButton_alternate Альтернативная кнопка ipsButton_important Важная кнопка ipsButton_light Светлая кнопка ipsButton_veryLight Очень светлая кнопка ipsButton_overlaid Наложенная кнопка ipsButton_link Кнопка ссылка Размеры кнопок ipsButton_medium Средняя кнопка ipsButton_verySmall Очень маленькая кнопка ipsButton_small Маленькая кнопка ipsButton_large Большая кнопка ipsButton_veryLarge Очень большая кнопка ipsButton_fullWidth Может быть объединена с другими размерами, указанными выше. Кнопка во всю ширину Отключённые кнопки Кнопки могут быть визуально неактивными, либо путём добавления класса ipsButton_disabled, либо указания свойства disabled к элементу ввода input. Например: <a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Неактивная кнопка (ссылка)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Неактивная кнопка (input)'> Это будет выглядеть примерно так: Неактивная кнопка (ссылка) Совместные кнопки Совместные кнопки позволяют вам легко создавать панели инструментов, указав список кнопок, которые отображаются совместно друг с другом. Они создаются с помощью специального класса ipsButton_split в элементе обложки, содержащем две или более кнопки. Элемент обложки может быть тегом <ul>, или любым другим по смыслу тегом. Все кнопки в группе совместных кнопок должны быть одинакового размера, в противном случае результаты отображения будут непредсказуемы. К каждой кнопке могут быть применены различные стили. <ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Кнопка 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 3</a></li> </ul> Кнопка 1 Кнопка 2 Кнопка 3

Если существующий CKEditor плагин не доступен, который вам необходим, другой вариант, который может быть подходящим для вас, это создание собственной кнопки. Что могут делать пользовательские кнопки? Пользовательские кнопки позволяют вам создавать HTML блоки, вставляемые при нажатии на кнопку на панели инструментов редактора. Блоки, которые вы создали, могут принимать контент от пользователей. Пользовательские кнопки не имею полноценных возможностей плагина CKEditor - они не могут быть динамическими или использовать Яваскрипт, например. Но для форматирования текста, полученного от пользователя, пользовательская кнопка является лучшим выбором. Хотя пользовательские кнопки, как правило, довольно просты, мы рекомендуем создавать их только, если у вас есть минимальные знания HTML, иначе обратитесь за помощью на наш форум. Создание пользовательской кнопки Для создания пользовательской кнопки, перейдите на страницу Кастомизация > Редактор > Тулбары. Нажмите на "Добавить кнопку" в верхней части страницы и выберите вкладку "Пользовательский". Показанная форма будет иметь следующие поля: Заголовок Всплывающее название кнопки, когда пользователь наводит курсор мыши на кнопку в редакторе. Иконка Небольшой графический файл, который будет выступать в качестве иконки кнопки в редакторе. Для поддержки экранов retina, загрузите иконку, бОльшую по размеру в два раза; она будет уменьшена в браузере и показана в высоком разрешении. Тип Поддерживается три типа контента, и они грубо имитируют три типа отображения элементов в HTML: Линейный - используется, когда HTML вставляется куда-то в строку текста. Не создает новую линию для содержания. Однолинейный блок - предназначен для отдельных строк (например заголовков), и размещает блок на новой строке. Блок - используется для нескольких строк, и ставит блок на новой линии. Использовать опцию? Пользовательская кнопка может дополнительно принимать значение от пользователя. Эта опция появится в виде всплывающего диалогового окна при клике пользователя на кнопку в редакторе, и введённое пользователем значение передаётся в блок. При включении этой настройки, вы увидите дополнительные настройки: Метка опции Текст показывается пользователю, запрашивающему значение параметра. HTML фактический HTML код, который вставит кнопка при использовании в редакторе. Как правило, поддерживается любой HTML код, но он должен быть валидным. В этом HTML коде могут быть использованы специальные теги: {option} Если этот параметр используется, этот тег будет заменён введённым пользователем значением, как есть. {content} Если ваша кнопка позволяет пользователям вводить свой контент в HTML блок, вставьте этот тег, куда пользователь сможет печатать. Нажмите кнопку Сохранить для создания кнопки. Ваша иконка будет отображена в тулбаре "Кнопки не в редакторе", и отсюда вы можете переместить её в рабочий тулбар. Использование пользовательских стилей Мы не рекомендуем использовать встроенные в ваш HTML код стили, т.к. в дальнейшем вы не сможете их обновить (сообщения построены таким образом, что при обновлении пользовательской кнопки, сообщения с устаревшей кнопкой не применят внесённые вами изменения). Вместо этого предлагается использовать имена классов, и добавить стили для них в ваш файл custom.css. Таким способом вы сможете в дальнейшем изменить свои стили, и все сообщения применят эти изменения. Пример кнопки Как вы могли заметить, в разделе документации мы используем специальные блоки, на которые необходимо обратить особое внимание, например: Это простой пример блока Это пользовательская кнопка редактора, которая доступна только для модераторов. Вот какие настройки необходимо использовать для создания этой кнопки: Заголовок - Заметка Иконка - Тип - блок Использовать опцию? - нет HTML: <div class='note'> {content} </div> Далее добавим пользовательские стили для кнопки в наш custom.css: .note { padding: 24px 30px 24px 122px; margin: 23px 0 23px -20px; background: #f6f6f6; font-size: 16px; color: #222; position: relative; } .note:before { content: "\f06a"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 63px; left: 40px; top: 7px; position: absolute; color: #929292; }