5.6 Применение CSS-стилей к форме

Для применения CSS-стилей к форме редактирования данных следует использовать команду addStyleTag.

Команда: addStyleTag

Действие:

Добавляет описание СSS-стилей в виде блока
<style>переданная_строка_CSS-стиля</style> внутри блока <head> формы редактирования.

Параметры:

  • data (структура): {
    • text (строка) };
  • В параметре data.text необходимо передать строку стилей CSS с указанием классов, используемых в форме ввода. Например, переданная в параметр data.text строка '.container{width: 500pt !important;}' выполнит изменение ширины формы ввода.

Пример реализации в JavaScript:

<script>
    // Функция, которая выполняется при нажатии кнопки «Стилизовать форму»
    function addStyleTag() {
        // Присвоение в переменную txtStyle строки CSS-стиля
        txtStyle = '.container {width: 500pt !important;}';
        // Получение открытого окна редактора цифровых документов по id=editor
        let editorWindow = document.querySelector('#editor').contentWindow;
        // Отправка команды в открытое окно редактора: addStyleTag
        // Параметры: data.text = строка стиля
        // В параметр data.text передается строка CSS-стиля из переменной txtStyle
        editorWindow.postMessage({
            system_id: 'GosedoPortal',
            data: {
                action: 'addStyleTag',
                data: {text: txtStyle}
            }
        },
        '*');
    }
</script>
<!--далее фрейм с подключенной формой редактирования данных Портала ГосЭДО-->
<iframe id="editor" src="http://10.77.142.21:84/#/constructor/selector/?theme=light"></iframe>
<!-- кнопка-->
<button onclick="addStyleTag()">Стилизовать форму</button>

С выполнением демонстрационного примера по описанной функции можно ознакомиться в разделе 4.5 Демонстрация передачи стилей в редактор.

Последнее изменение: Wednesday, 26 June 2024, 13:03