Цитата в редакторе битрикс
Обновлено: 17.05.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С-Битрикс: Управление сайтом. Политика конфиденциальности
Читайте также: