Цитата в редакторе битрикс

Обновлено: 22.12.2024

В модуле Обучение в визуальном редакторе добавить кнопки "оформление текста в виде кода", "оформление текста в виде цитаты"

Почему Битрикс так не любит модуль обучение?

Взялся писать документацию, не могу вставить код. К модуле обучение у меня отсутствует кнопочка <. >.

Продукты

Управление сайтом

Битрикс24

Мобильное приложение

Интернет-магазин + CRM

Выводим стили в область меню редактора

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

Давайте подробнее разберем на примере стиля цитаты. Откроем файл styles.css на редактирование, прописываем наш массив return array() , в нем указываем ключ, который является названием стиля цитаты ‘ kquote ’, далее в нем прописываем массив с обязательным ключом ' tag ' в который передаем значение в кокой тег будет обернута цитата укажем ‘ p ’ , затем обязательный ключ ‘ title ’ со значением фразы, которая будет выводиться в меню редактора, сохранимся и посмотрим что получилось.

Открываем страничку на редактирование, стили, тут в выпадающем списке видим нашу цитату. Теперь давайте предадим ей оформление, для этого добавляем в файле styles.css ключ ‘ html ’ и в значении прописываем наш стиль, сохраняемся.

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

Есть еще не обязательный ключ с названием ‘section’ с его помощью мы можем разбивать стили по категориям. На данный момент стили можно отнести только в существующие категории такие как:

  • ‘ quote ’ – Цитата
  • ‘ text ’ – Выделенный текст
  • ‘ block ’ – Текстовый блок
  • ‘ block_icon ’ – Текстовый блок с иконкой
  • ‘ list ’ - список

Создадим еще несколько примеров цитирующей области, и всем им пропишем ключ ‘ section ’ со значением ‘ quote ’ , сохранимся и посмотрим редактор.

Получилась новая категория с Цитатами. Для примера я пропишу оформление остальных стилей в файле ‘section’ и посмотрим, как они будут отображаться.

Внимание! Ошибки при создании стилей могут вызвать серьезные проблемы в работе сайта, поэтому данную задачу лучше предоставить разработчику с необходимой квалификацией.
Ссылка на - документацию Битрикс по уроку " Стили визуального редактора"

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

Следующая цитата

1. Добавим свои кнопки в новом визуальном редакторе Битрикс

Все изменения сделал в трех скриптах нового визуального редактора:
/bitrix/js/fileman/html_editor/html-base-controls.js
/bitrix/js/fileman/html_editor/html-actions.js
/bitrix/js/fileman/html_editor/html-controls.js

1. Изменения в файле /bitrix/js/fileman/html_editor/html-base-controls.js

В методе GetControlsMap: function() в массив res[] добавим две строчки:

которые и будут инициализировать соответствующие им методы и кнопки в других файлах, рис. 1


Рис. 1

2. Изменения в файле /bitrix/js/fileman/html_editor/html-actions.js

В методе GetActionList: function() в объект this.actions = <> добавим следующие строчки

insertCode: this.GetCode(),
insertQuote: this.GetQuote(),

которые будут вызывать стандартные обработчики кнопок в визуальном редакторе страниц и инфоблоков, рис. 2


Рис. 2

3. Изменения в файле /bitrix/js/fileman/html_editor/html-controls.js

Ну и последний штрих, в метод window.BXHtmlEditor.Controls = <> в самом конце добавим две строчки

InsertCode: CodeButton,
InsertQuote: QuoteButton

которые, как я понял, добавляют нужные нам "кнопки вставки кода и цитат" в "новый визуальный редактор Битрикс", рис. 3


Рис. 3

Обновите страницу, открывайте любую страницу сайта или элемента инфоблока, хоть в админке, хоть в публичке и там будут наши долгожданные две новые кнопки: "Вставка кода" и "Цитата".

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

Рис. 4

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

Рис. 5

Решения

Для интернет-магазинов

Для медорганизаций

Для учебных заведений

Для госорганизаций

Каталог готовых решений

Заключение

К сожалению я не силен в JavaScript Битрикс, поэтому получилось только такое решение, где нашел, там и сделал, может с этого поста у кого появится идея, достаточно знаний, как сделать универсально, по событиям, чтобы не терять обновления и не изменять системные файлы, все будем счастливы!

Следующая цитата

Ткните пожалуйста меня в то место где я могу "пошупать" HTML который цитату на форумах в ответах пользователей формирует по:

Эксперт

г.Красноярск

07.12.2010 08:16:20

Думай, как баг. Мысли, как баг. Будь багом

Постоянный посетитель

07.12.2010 11:34:48

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

Устанавливаем визуальный режим отображение стилей в редакторе

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

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

Открываем данную страничку на редактирование, текст представлен в формате как на страничке сайта. Но, не все форматирование отобразилось, некоторые элементы оформления подключаются с помощью bootstrap.css и font-awesome.css . и для их отображения в визуальном редакторе нам необходимо в файле description.php подключить сторонние стили.

Открываем его на редактировании и прописываем ключ EDITOR_STYLES с массивом подключаемых URL файлов.

Следующая цитата

В данном видео разберем формирование своих стилей в области редактора. Стили отобразим не только в форме редактирования, но и встроим их в само меню, в своем оформлении.

Структура формирование стилей

Стили шаблона на сайте устанавливаются при помощи template_styles.css или любым другим подключаемым файлом к сайту. Минус в том, что при редактировании мы не видим как эти стили применяются к нашему тексту в визуальном редакторе. Мы только видим конечный результат, когда страничку сохранили.

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

Стили их предназначение

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

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

У Битрикс есть такая плюшка, что мы можем формировать свои стили и выводить их в меню редактора. При их выборе текст сразу форматируется в форме, и отображается в том стиле как на страничке сайта. Как это сделать смотрите далее!

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером

© 2001-2021 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности

Читайте также: