Question

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

目前，Froala编辑器不会加载错误＆＃34; this。 $ element.froalaEditor不是函数＆＃34;

我发现以下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');
     });
}
}

Answer 2

我认为更好的解决方案是使用this。您不需要将Jquery与Ckeditor一起使用，并且设置非常简单。

Demo

为了避免在index.html中使用脚本，请使用npm为ckeditor安装ng2-ckeditor。

npm install --save ckeditor

和

npm install --save ng2-ckeditor

Froala编辑器Angular 5：_this ._ $ element.froalaEditor不是函数

2 个答案: