Установите пользовательскую высоту для Ngx Editor

Я использую ngx-редактор для создания редактора wysiwyg для моего стекового приложения MEAN. Все работает нормально, но я хочу установить высоту для этого редактора. Я попытался установить высоту в файле CSS для компонента, как

.ngx-editor[_ngcontent-c4] .ngx-editor-textarea[_ngcontent-c4] {
    height: 300px !important;
}

но все равно не работает.

Даже я пытался установить высоту из файла component.html, как это

<div class="form-group">
      <label for="desc">Description</label>
      <app-ngx-editor style="height: 300px" [style]="{'min-height':'320px'}" formControlName="desc" [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>
    </div>

но все равно не работает.

Может кто-нибудь сказать мне, как установить высоту для редактора? Я просмотрел его документы, но пока не получил никакой помощи. Так может кто-нибудь сказать мне, как установить его высоту? Любая помощь и предложения будут действительно заметны

Источник

8 ответов

Вы можете просто установить высоту редактора, используя height а также minHeight имущество

<app-ngx-editor height="100px" minHeight="50px"></app-ngx-editor>
Источник

Ни один из этих ответов у меня не сработал, поэтому мне пришлось вручную отредактировать CSS (использовал столбцы Bootstrap):

      ::ng-deep { /* to penetrate <ngx-editor> CSS styling */

  .NgxEditor {
    height: 400px;
    overflow-y: scroll;
  }

  .NgxEditor__Content {
    min-height: 400px; /* make all of the editor area clickable */
  }
}

Не уверен, что это лучшее решение, но оно работает :)

Источник

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

в вашем HTML

Файл.ts создает переменную, как показано ниже

textareaConfig = { 'editable': true, 'spellcheck': true, 'height': 'auto', // вы также можете установить высоту 'minHeight': '100px', };

Источник

РЕДАКТИРОВАТЬ: обратитесь к онлайн-документам, о том, как установить minHeight и / или высоту через конфигурацию.

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

:host app-ngx-editor /deep/ .ngx-editor-grippie {
    display:none;
}

РЕДАКТИРОВАТЬ: Использование resizer="basic" будет делать то же самое, что и выше, за исключением того, что вы увидите небольшую ручку в нижнем правом углу.

Мой оригинальный ответ о том, как напрямую установить CSS с помощью глубокой ссылки на стили хост-компонента...

Вы можете установить высоту текстовой области ngx-редактора, установив свойство height существующего класса стилей с именем ngx-editor-textarea, лайк:

:host app-ngx-editor /deep/ .ngx-editor-textarea {
    height:100px !important;
}

Подсказывает Филу Флешу его предложение, отвечая на аналогичный вариант использования, связанный с ngx-quill. Хотя он устанавливает и использует id на элементе мое решение использует существующий класс и может в будущем выпуске переименовать класс.

Источник

Я использую [email protected] , и в этой версии простой селектор CSS помогает.

      .NgxEditor__Content {
    min-height: 400px; /* make all of the editor area clickable */
  }
Источник

Вам нужно использовать конфигурацию атрибута привязки:

      <app-ngx-editor [config]="configName" [spellcheck]="true" [(ngModel)]="myTextArea"></app-ngx-editor>

Затем в вашем компоненте ts, прямо под вашим классом экспорта:

      export class ClassName implements ***** {
configName= {
    editable: true,
    height: '10rem',
    minHeight: '5rem',
    placeholder: 'Type here',
    translate: 'no'
  };

Это должно сработать.

Источник

NGX-редактор

"ngx-editor" поддерживает ниже всех встроенных атрибутов html.

editable: boolean;
    /** The spellcheck property specifies whether the element is to have its spelling and grammar checked or not. */
    spellcheck: boolean;        
    /**The translate property specifies whether the content of an element should be translated or not.*/
    translate: string;
    /** Sets height of the editor */
    height: string;
    /** Sets minimum height for the editor */
    minHeight: string;
    /** Sets Width of the editor */
    width: string;
    /** Sets minimum width of the editor */
    minWidth: string;
     /**
     * The editor can be resized vertically.
     *        
    resizer: string;

Таким образом, вы можете использовать его просто как ниже:

<app-ngx-editor height="400"  minheight="200" width="400" minWidth="400"> </app-ngx-editor>
Источник

Я думаю, что ниже решение должно работать.

<app-ngx-editor [height]="'100px'" [minHeight]="'50px'"></app-ngx-editor>

Пожалуйста, смотрите "'" внутри значения атрибута.

Источник
Другие вопросы по тегам