Question

我刚刚在我的角度应用程序中添加了ngx-editor版本3.3.0。但是，当我在app.module.html

中添加以下行时

<app-ngx-editor [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>

我的浏览器没有任何显示。我还在app.module.ts中的项目中添加了formsModule，font-awesome module和ngx-bootstrap模块。以下是我的app.module.ts：

...
import { FormsModule} from '@angular/forms'
import { NgxEditorModule } from 'ngx-editor';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  declarations: [
    AppComponent,
    UserListComponent,
    SendMenuComponent,
    UsersRecordComponent,
    AdminAddComponent,


  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    FormsModule,
    ToastrModule.forRoot(),
    BrowserAnimationsModule,
    NgxEditorModule,
    AngularFontAwesomeModule,
    TooltipModule.forRoot(),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我终于通过添加以下行解决了这个问题：

htmlContent = '<p>Hi</p>';

到我的app.component.ts文件中。这是用来在[(ngMode)]标签（即app-ngx-editor）中设置[(ngModel)]="htmlContent"属性的值。

默认情况下，编辑器的高度也已压缩。我们可以通过向[config] = "editorConfig"标签添加app-ngx-editor属性指令并在app.component.ts文件中分配值来设置编辑器的属性，即

app.component.html

<app-ngx-editor [config]="editorConfig" [placeholder]="'Enter text here...'" [(ngModel)]="htmlContent"></app-ngx-editor>

app.component.ts

editorConfig = {
    editable: true,
    spellcheck: false,
    height: '70em',
    minHeight: '5rem',
    width: '100%',
    translate: 'no'
  };

  htmlContent = '<p>Hi</p>';

Answer 2

我通过将html标签从app-ngx-editor更改为ngx-editor来解决了这个问题。另外，我在遵循this文档之后进行了此操作。

Ngx编辑器未在任何浏览器中显示

2 个答案: