Содействие Open Source: Dillinger как пример

Не совсем то, что мы искали, а? Это нормально, мы можем «проверить элемент» в текстовом поле и вносить некоторые изменения на лету, пока не получим то, что нас устраивает.

Первое, что мы делаем, это даем текстовой области ширину и высоту 100%.

Хм, это не совсем то, что мы хотели. Это потому, что высота наследуется от родительского элемента — 100% означает 100% высоты родителя. Нам также нужно будет отредактировать стиль содержащего div.

Мы дадим ему абсолютную позицию, чтобы мы могли абсолютно точно позиционировать его внутри модального окна. Затем мы дадим ему ширину 565 пикселей, потому что все модальное окно имеет фиксированную ширину 600 пикселей, и 565 пикселей подходит очень хорошо. Чтобы растянуть его от теоретической вершины модального тела до низа, мы используем фиксированные значения вместо процентов, следя за тем, чтобы мы определяли только смещение от краев, а все промежуточное заполнялось автоматически. Мы даем ему верхнее значение 45px (достаточное для отображения заголовка модального окна, кнопки закрытия и разделительной линии) и нижнее значение 10px, достаточное для имитации хорошего поля. Внезапно, у нас есть это:

Если хотите, добавьте background-color: transparent

Теперь, когда мы знаем, что нам нужно делать с CSS, чтобы получить то, что мы хотим, давайте реализуем это в коде проекта. Откройте modals.stylStylus ) и вставьте следующий CSS:

 #myModalBody {
    position: absolute;
    width: 565px;
    top: 45px;
    bottom: 10px;
}

#modalBodyText {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

Файлы стилусов поддерживают чистый CSS, так что не знакомы со стилусом — это хорошо.

Если мы перезагрузим Dillinger сейчас, наши стили не будут применены. Это связано с тем, что сначала необходимо создать приложение — при запуске сценария build.js в папке приложения все файлы JS и Styl скомпилируются в сжатые файлы JS и CSS. Запустите node build Не должно занимать больше пары секунд.

Перезагрузите Dillinger сейчас, и обратите внимание, что все так, как мы этого хотим — за исключением одного. По умолчанию текстовая область не находится в режиме выбора всех. Давайте изменим это. Замените функцию doneHandler

 function _doneHandler(jqXHR, data, response){
            var resp = JSON.parse(response.responseText)
            var textarea = $('#modalBodyText')
            $(textarea).val(resp.data)
            $('#myModal').on('shown.bs.modal', function (e) {
                $(textarea).focus().select()
            }).modal()
        }

Сначала кэшируйте извлеченную текстовую область, чтобы избежать дублирования селекторов jQuery. Затем мы помещаем данные в текстовое поле, как и прежде, но перед вызовом метода modal() Когда это будет сделано, мы поместим фокус в область textarea и принудительно установим состояние select-all с помощью метода select()

Если вы перезагрузите Dillinger сейчас, вы увидите, что он работает, и наш HTML-контент автоматически выбирается. Снова запустите node build

Завершение

Пока вы находитесь в своей собственной ветке, зафиксируйте проект с сообщением «Обновленная функция ShowHTML для отображения содержимого HTML в автофокусной текстовой области select-all». Многие файлы будут изменены из-за процесса сборки, но это нормально. Давайте сейчас подключим наш филиал.

 git push origin showhtml-fix

Наш новый филиал появился в репозитории на GitHub.

Мы отправляем запрос на извлечение, нажав «Сравнить и запрос на извлечение». После написания хорошего описания и возможной ссылки на связанную проблему, как показано на снимке экрана ниже, мы нажимаем «Отправить запрос на извлечение».

Вывод

Это оно! После того, как пиар отправлен, нам остается только ждать отклика автора. Если наш PR будет принят, нам нужно выполнить шаги, описанные в разделе «Подключение вашего репо к оригиналу», чтобы загрузить последнюю версию в наше собственное репо.

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