为Ngx编辑器

时间:2018-01-25 08:03:40

标签: angular wysiwyg ngx-editor

我使用ngx-editor为我的MEAN堆栈应用程序创建wysiwyg编辑器。一切都很好,但我想为这个编辑器设置高度。我试图在css文件中设置像

这样的组件的高度
.ngx-editor[_ngcontent-c4] .ngx-editor-textarea[_ngcontent-c4] {
    height: 300px !important;
}

但仍然不起作用。

即使我尝试像component

那样从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>

但仍无效。

有人可以告诉我如何设置编辑器的高度吗?我已经完成了它的文档,但到目前为止还没有得到任何帮助。那么有人可以告诉我如何设置其高度?任何帮助和建议都会非常明显

7 个答案:

答案 0 :(得分:9)

您只需使用heightminHeight属性设置编辑器的高度。

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

答案 1 :(得分:2)

这些答案都不适合我,所以我不得不手动编辑一些 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 */
  }
}

不确定这是否是最好的解决方案,但它有效:)

答案 2 :(得分:0)

编辑:请参阅online docs,了解如何通过配置设置minHeight和/或身高。

但是......我注意到,在minHeight和height之间,没有办法限制高度。因此,我仍然使用我的原始答案,并删除了grippie ......

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

编辑:使用resizer =&#34; basic&#34;除了你会在右下角看到一个小小的夹具外,你会做同上面的事情。

关于如何通过深度引用主机组件样式来直接设置CSS的原始答案......

您可以通过设置名为height的现有样式类的属性ngx-editor-textarea来设置ngx-editor文本区域的高度,例如:

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

在回答与Phil Flash相关的类似用例时,向ngx-quill提出建议。虽然他在元素上设置并使用id,但我的解决方案使用现有的类,并且可能在将来的版本中重命名该类。

答案 3 :(得分:0)

  

ngx编辑器

“ ngx编辑器”在所有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>

答案 4 :(得分:0)

有一种方法可以设置工具栏的最小和最大高度 使用配置设置最小和最大高度

在您的HTML中

.ts文件 创建如下所示的变量

textareaConfig = {     “可编辑”:是,     '拼写检查':是的,     'height':'auto',//您也可以设置高度     'minHeight':'100px',   };

答案 5 :(得分:0)

我认为以下解决方案应该可行。

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

请参阅属性值内的"'"

答案 6 :(得分:0)

您需要使用绑定属性配置:

<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'
  };

应该可以。