Froala编辑器没有引用jQuery

我想在我的Angular4应用程序中使用Froala编辑器。这是一个使用Javascript Services和Angular2SpaTemplate的.NET Core项目。Froala编辑器没有引用jQuery

这里是我的配置：

// [ webpack.config.vendor.js ] 
... 
module.exports = (env) => { 
    entry: { 
     vendor: [ 
      ... 
      'font-awesome/css/font-awesome.css', 
      'froala-editor/css/froala_editor.pkgd.css', 
      'froala-editor/css/froala_style.css', 
      'jquery' 
      ... 
     ] 
    }, 
    plugins: { 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      ... 
     }, 
     ... 
    } 
} 

// [ Layout.module.ts ] 
// I created a LayoutModule, to group all layout stuff 

// Import the Froala Editor plugin. 
import "froala-editor/js/froala_editor.pkgd.min.js"; 

// Import Angular plugin. 
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg'; 

@NgModule({ 
    imports: [ 
     ... 
     // Froala 
     FroalaEditorModule.forRoot(), 
     FroalaViewModule.forRoot() 
    ], 
    exports: [ 
     ... 
     FroalaEditorModule, 
     FroalaViewModule, 
    ] 
}) 
export class LayoutModule { }

于是我进口，其中它的组件将被用于任何其他模块中的布局模块，因此我有，我想用froala组件，模块

// [ mycomponent.html ] 
<textarea [froalaEditor] class="form-control" name="summary" id="summary" formControlName="summary"></textarea>

一切都很好，我可以从命令行下面的命令运行没有问题。

webpack 
webpack --config webpack.config.vendor.js

在运行时，组件会引发此异常。

ERROR ReferenceError: $ is not defined 
at new FroalaEditorDirective (editor.directive.js:29) 
at createClass (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:15748) 
at createDirectiveInstance (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:15579) 
at createViewNodes (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17007) 
at callViewAction (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17451) 
at execComponentViewsAction (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17360) 
at createViewNodes (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17034) 
at createRootView (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:16902) 
at callWithDebugContext (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:18283) 
at Object.debugCreateRootView [as createRootView] (vendor.js?v=p9mu7NwAjYIo1I3QMys0zFQ6NBHDtn3nUqAYWCqMzNw:17600)

我不知道问题出在哪里，显然$（jQuery）没有按预期导入。

任何指向正确的方向将不胜感激。

来源

2017-07-10 arosgab

这是因为jQuery在全局上不可见。也许它会工作，如果你在你的main.ts添加以下内容：

import * as $ from 'jquery'; 
window["$"] = $; 
window["jQuery"] = $;

来源

2017-07-14 20:08:58 st3fan

谢谢@ st3fan，工作！ – arosgab

我想知道什么是**新的webpack.ProvidePlugin（{jQuery：'jquery'， jQuery：'jquery'， ... } **。我认为导入jquery。无论如何，添加这些行可以工作。 – arosgab

它使jQuery在全球范围内可用。 – st3fan

Froala编辑器没有引用jQuery

回答

相关问题