Редактор Trix WYSIWYG изменяет строки по умолчанию / вертикальную высоту текстового поля

Question

Я прочитал документацию Trix, и ответ не выскакивал за меня. Похоже, что редактор Trix WYSIWYG по умолчанию имеет 3 отображаемых строки:

Любой шанс, что это может быть переключено на большее количество строк, например: 15 или около того строк:

Answer 1

Это вопрос установки min-height атрибут css. Используя JavaScript, это работает, если у вас есть только один trix-editor на странице:

$('trix-editor').css("min-height", "350px");

Если у вас есть несколько редакторов trix на странице, и вы хотите изменить только высоту по умолчанию для этого: то, что я сделал, я обернул редактор trix в div, установил класс для этого div и использовал find:

$('.solution-trix-field-wrapper').find($('trix-editor')).css("min-height", "350px");

Answer 2

Да, вы правы, но я решил по-другому.

Вы можете переопределить CSS по умолчанию, как trix-content учебный класс

.trix-content{
    height: 350px;
}

Вы можете увеличить высоту, используя этот CSS, если вы хотите использовать прокрутку после некоторой глубины, то overflow-y: auto; лайк

.trix-content{
    height: 350px;
    overflow-y: auto;
}

после 350px это автоматически добавит полосу прокрутки.

Answer 3

В рельсах 7 мне пришлось переопределить min-heightпринадлежащий trix-editorэлемент. Введите код app/assets/stylesheets/actiontext.css

      trix-editor {
  min-height: 15em;
}