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

回答

相關問題