Question

将Jodit Rich文本编辑器集成到Jhipster时遇到问题。代码可以很好地编译，但是浏览器控制台显示错误。但是，相同的插件配置在纯角度6/7应用程序上也可以正常工作。我已经安装了Jodit 3.2.27插件，并在实体更新组件中给出了该条目。页面可以正常编译，但是使用Jodit RTF编辑器访问应用程序页面会导致浏览器控制台错误。我正在使用Chrome浏览器。

我创建了一个名称为Company的实体，并将jodit插件导入compnay.module.ts中，以便在company-update.component上使用编辑器。示例代码如下。

compnay.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JoditAngularModule } from 'jodit-angular';

import { JhipsterDemoAppSharedModule } from 'app/shared';
import {
    CompanyComponent,
    CompanyDetailComponent,
    CompanyUpdateComponent,
    CompanyDeletePopupComponent,
    CompanyDeleteDialogComponent,
    companyRoute,
    companyPopupRoute
} from './';

const ENTITY_STATES = [...companyRoute, ...companyPopupRoute];

@NgModule({
    imports: [JhipsterDemoAppSharedModule, JoditAngularModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [
        CompanyComponent,
        CompanyDetailComponent,
        CompanyUpdateComponent,
        CompanyDeleteDialogComponent,
        CompanyDeletePopupComponent
    ],
    entryComponents: [CompanyComponent, CompanyUpdateComponent, CompanyDeleteDialogComponent, CompanyDeletePopupComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterDemoAppCompanyModule {}

company-update.component.html

<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
            <h2 id="jhi-company-heading" jhiTranslate="jhipsterDemoApp.company.home.createOrEditLabel">Create or edit a Company</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!company.id">
                    <label for="id" jhiTranslate="global.field.id">ID</label>
                    <input type="text" class="form-control" id="id" name="id"
                        [(ngModel)]="company.id" readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" jhiTranslate="jhipsterDemoApp.company.name" for="field_name">Name</label>

                        <jodit-editor class="editable"   [config]="{
                            showCharsCounter: false,
                            showWordsCounter: false,
                            showXPathInStatusbar: false,
                            height: 500,
                            buttonsXS: 'bold,strikethrough,underline,italic,ul,ol',
                            buttons: 'source,bold,underline,italic,ul'
                          }">
                        </jodit-editor>
                </div>

            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
                </button>
            </div>
        </form>
    </div>
</div>

而不是页面中的jodit编辑器，但低于chrome浏览器控制台中的错误。

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(JhipsterDemoAppAppModule)[JoditAngularComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[JoditAngularComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!
Error: StaticInjectorError(JhipsterDemoAppAppModule)[JoditAngularComponent -> ElementRef]: 
  StaticInjectorError(Platform: core)[JoditAngularComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!

Jodit Rich文本编辑器与Jhipster的集成错误

0 个答案: