代码之家  ›  专栏  ›  技术社区  ›  gabaros

Froala编辑器未引用jQuery

  •  1
  • gabaros  · 技术社区  · 8 年前

    这是我的配置:

    // [ 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 { }
    

    // [ 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)没有按预期导入。

    任何指向正确方向的点都将受到赞赏。

    1 回复  |  直到 8 年前
        1
  •  2
  •   st3fan    8 年前

    main.ts :

    import * as $ from 'jquery';
    window["$"] = $;
    window["jQuery"] = $;
    
    推荐文章