Froala Editor Angular 5：_this._$element.froalaEditor 不是函数

Question

我们在项目中使用 Froala 编辑器（Asp.net Core 2 Angular 模板升级到 Angular 5）

目前 Froala 编辑器不会加载错误“this.$element.froalaEditor is not a function”

我有以下 GitHub 问题无济于事和 Froala 安装指南。 https://github.com/froala/angular-froala-wysiwyg/issues/17

https://www.froala.com/wysiwyg-editor/docs/framework-plugins/angularjs-2-4

app.module.shared

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'
import { RouterModule } from '@angular/router';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { GlobalModule } from './global/global.module';
import { ServiceProxyModule } from "./proxy/service-proxy.module";

import { AppRoutingModule } from './app-routing.module';
import { DashboardModule } from "./components/dashboard/dashboard.module";

import "froala-editor/js/froala_editor.pkgd.min.js";
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
//import * as $ from 'jquery'; window["$"] = $; window["jQuery"] = $;//this line doesn't make a difference


import { ToastModule } from 'ng2-toastr/ng2-toastr'; 

//app components
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from "./components/home/home.component";

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent
    ],
    imports: [
        GlobalModule.forRoot(),
        DashboardModule,
        AppRoutingModule,
        CommonModule,
        HttpClientModule,
        ServiceProxyModule,
        FormsModule,
        ReactiveFormsModule,
        PopoverModule.forRoot(),
        ModalModule.forRoot(),
        BsDropdownModule.forRoot(),
        FroalaEditorModule.forRoot(),
        FroalaViewModule.forRoot(),
        ToastModule.forRoot()
    ]
})
export class AppModuleShared {
}

home.component.ts

import { Component } from '@angular/core';
//import * as $ from 'jquery'; window["$"] = $; window["jQuery"] = $;


@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {

}

home.component.html

<nav-menu></nav-menu>
<div [froalaEditor]>Hello, Froala!</div>

.net Core Angular 应用确实使用 webpack，所以我也遵循了 Froala 安装页面上的一些建议https://github.com/froala/angular-froala-wysiwyg#use-with-webpack

我的 webpack.config.js 现在在 sharedConfig 中有这个

plugins: [new CheckerPlugin(), new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })]

并且 webpack.config.vendor.js 在 nonTreeShakableModules 中有以下内容

const nonTreeShakableModules = [
    'bootstrap',
    'font-awesome/css/font-awesome.min.css', //this is here for froala
    '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css',
    '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
    '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
     ...
    'jquery',
     ...
    'froala-editor/css/froala_editor.pkgd.min.css',
    'froala-editor/css/froala_style.min.css',
    'froala-editor/js/froala_editor.pkgd.min.js',
    'ng2-toastr/bundles/ng2-toastr.min.css',
    'ng2-toastr/bundles/ng2-toastr.min.js',
    ...
];

jquery 肯定已安装并且可以正常工作。我不知道我是否遗漏了一些小东西，但到目前为止我所尝试的都没有奏效。

Answer 1

这对我有用。 我的模板是这样的。

<div [froalaEditor]="options" #froalaEditor  formControlName="message" required >Hello, Froala!</div>

在组件中。

window['$'] = $;
window['jQuery'] = $;
declare var $: any;

export class MyComponent {

  @ViewChild('froalaEditor') froalaEditor;

  ngOnInit(): void {
    $(this.froalaEditor.nativeElement).on('froalaEditor.contentChanged', (e, editor) => {
     console.log('content changed');
     });
}
}