未捕获的 ReferenceError：未定义模块 RequireJS

Question

我已经使用 RequireJS 成功地将 Froala 实现为 Angular，但是出现了 2 个问题。

如果我想添加另一个 froala 插件（比如说 url 输入），它会返回错误

未捕获的引用错误：未定义模块

无法获取，如果主插件froala没有返回任何错误，为什么froala插件因为编码相同而返回？

main.js

/*jshint unused: vars */
require.config({
  paths: {
    angular: '../../bower_components/angular/angular',
    'angular-animate': '../../bower_components/angular-animate/angular-animate',
    'angular-cookies': '../../bower_components/angular-cookies/angular-cookies',
    'angular-mocks': '../../bower_components/angular-mocks/angular-mocks',
    'angular-resource': '../../bower_components/angular-resource/angular-resource',
    'angular-route': '../../bower_components/angular-route/angular-route',
    'angular-sanitize': '../../bower_components/angular-sanitize/angular-sanitize',
    'angular-touch': '../../bower_components/angular-touch/angular-touch',
    'ui-router': '../../bower_components/angular-ui-router/release/angular-ui-router.min',
    jquery: '../../bower_components/jquery/dist/jquery',
    bootstrap: '../../bower_components/bootstrap/dist/js/bootstrap',
    'angular-ui-router': '../../bower_components/angular-ui-router/release/angular-ui-router',
    'froala-editor': '../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
    'froala-pl': '../../bower_components/froala-wysiwyg-editor/js/languages/pl',
    froala: '../../bower_components/angular-froala/src/angular-froala',
    'froala-sanitize': '../../bower_components/angular-froala/src/froala-sanitize',
    'froala_url': '../../bower_components/froala-wysiwyg-editor/js/plugins/url.min'
  },
  shim: {
    angular: {
      exports: 'angular'
    },
    'froala-pl': [
      'froala-editor'
    ],
    froala: [
      'froala_url',
      'angular',
      'froala-pl',
      'froala-sanitize'
    ],
    'froala-sanitize': [
      'angular'
    ],
    'angular-route': [
      'angular'
    ],
    'angular-cookies': [
      'angular'
    ],
    'angular-sanitize': [
      'angular'
    ],
    'angular-resource': [
      'angular'
    ],
    'angular-animate': [
      'angular'
    ],
    'angular-touch': [
      'angular'
    ],
    'ui-router': [
      'angular'
    ],
    'angular-mocks': {
      deps: [
        'angular'
      ],
      exports: 'angular.mock'
    },
    bootstrap: [
      'jquery'
    ]
  },
  priority: [
    'angular'
  ],
  packages: [

  ]
});

//http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = 'NG_DEFER_BOOTSTRAP!';

require([
  'angular',
  'app',
  'angular-route',
  'angular-cookies',
  'angular-sanitize',
  'angular-resource',
  'angular-animate',
  'angular-touch',
  'ui-router',
  'jquery',
  'bootstrap',
  'froala',
  'froala_url'
], function(angular, app, ngRoutes, ngCookies, ngSanitize, ngResource, ngAnimate, ngTouch) {
  'use strict';
  /* jshint ignore:start */
  var $html = angular.element(document.getElementsByTagName('html')[0]);
  /* jshint ignore:end */
  angular.element().ready(function() {
    angular.resumeBootstrap([app.name]);
  });
});

app.js

/*jshint unused: vars */
define(['angular', 'controllers/main', 'controllers/admin', 'services/rest', 'services/auth', 'controllers/pages', 'controllers/dashboard']/*deps*/, function (angular, MainCtrl, LoginCtrl, RESTFactory, AuthFactory, PagesCtrl, DashboardCtrl)/*invoke*/ {
  'use strict';

  /**
   * @ngdoc overview
   * @name cmsApp
   * @description
   * # cmsApp
   *
   * Main module of the application.
   */
  return angular
    .module('cmsApp', 
      ['cmsApp.controllers.MainCtrl',
       'cmsApp.controllers.AdminCtrl',
       'cmsApp.services.REST',
       'cmsApp.services.Auth',
'cmsApp.controllers.PagesCtrl',
'cmsApp.controllers.DashboardCtrl',
/*angJSDeps*/
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ngAnimate',
    'ngTouch',
    'ui.router',
    'froala'
  ])
    .config(function ($urlRouterProvider, $stateProvider) {
      $urlRouterProvider.otherwise("/");

      $stateProvider
        .state('main', {
          url: '/',
          templateUrl: 'views/main.html',
          controller: 'MainCtrl',
          controllerAs: 'main'
        })
        .state('dashboard', {
          url: '/dashboard',
          templateUrl: 'views/dashboard/index.html',
           resolve: { authenticate: authenticate },
          controller: 'DashboardCtrl',
          controllerAs: 'dashboard'
        })
        .state('dashboard.subpage', {
          url: '/page/:id',
          templateUrl: 'views/dashboard/pages/edit.html',
          params: {
                    id: null
          }
        })
        .state('admin', {
          url: '/admin',
          templateUrl: 'views/admin.html',
          controller: 'AdminCtrl',
          controllerAs: 'admin'
        });


      function authenticate(Auth, $state, $timeout) {
        var Auth = Auth.isLogged();

        return Auth.then(function(response){
            var data = response.data;
                      if(data.logged_in == false)
                      {
                          $timeout(function(event) {
                              $state.go('admin');
                          }, 10);
                      } 
        });
      }

      
    });

});

fraola_url.min.js

/*!
 * froala_editor v2.0.1 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms
 * Copyright 2014-2015 Froala Labs
 */

! function(a) {
    "function" == typeof define && define.amd ? module.exports = function(b, c) {
        return void 0 === c && (c = "undefined" != typeof window ? require("jquery") : require("jquery")(b)), a(c), c
    } : a(jQuery)
}(function(a) {
    "use strict";
    a.extend(a.FroalaEditor.DEFAULTS, {}), a.FroalaEditor.URLRegEx = /(\s|^|>)((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+(\.[a-zA-Z]{2,3})?(:\d*)?(\/[^\s<]*)?)(\s|$|<)/gi, a.FroalaEditor.PLUGINS.url = function(b) {
        function c(d) {
            d.each(function() {
                if ("IFRAME" != this.tagName)
                    if (3 == this.nodeType) {
                        var d = this.textContent.replace(/&nbsp;/gi, "");
                        a.FroalaEditor.URLRegEx.test(d) && (a(this).before(d.replace(a.FroalaEditor.URLRegEx, '$1<a href="$2">$2</a>$7')), a(this).remove())
                    } else 1 == this.nodeType && ["A", "BUTTON", "TEXTAREA"].indexOf(this.tagName) < 0 && c(b.node.contents(this))
            })
        }

        function d() {
            b.events.on("paste.afterCleanup", function(b) {
                return a.FroalaEditor.URLRegEx.test(b) ? b.replace(a.FroalaEditor.URLRegEx, '$1<a href="$2">$2</a>$7') : void 0
            }), b.events.on("keyup", function(d) {
                var e = d.which;
                (e == a.FroalaEditor.KEYCODE.ENTER || e == a.FroalaEditor.KEYCODE.SPACE) && c(b.node.contents(b.$el.get(0)))
            }), b.events.on("keydown", function(c) {
                var d = c.which;
                if (d == a.FroalaEditor.KEYCODE.ENTER) {
                    var e = b.selection.element();
                    if (("A" == e.tagName || a(e).parents("a").length) && b.selection.info(e).atEnd) return c.stopImmediatePropagation(), "A" !== e.tagName && (e = a(e).parents("a")[0]), a(e).after("&nbsp;" + a.FroalaEditor.MARKERS), b.selection.restore(), !1
                }
            })
        }
        return {
            _init: d
        }
    }
});

垫片配置

'froala-editor': {
      deps: ['jquery']
    },
    'froala-sanitize': {
      deps: [
        'angular'
      ]
    },
    froala: {
      deps: [
        'angular',
        'froala-editor',
        'froala-pl',
        'froala-sanitize'
      ]
    },
    'colors': {
      deps: [
        'jquery',
        'froala-editor'
      ]
    }

Answer 1

编辑器的存档中有一个使用 RequireJS 的示例：https://github.com/froala/wysiwyg-editor/blob/master/html/require_js/index.html#L49

Answer 2

“bower angular-froala”也会自动安装带有坏 repo 插件的“froala-wysiwyg-editor”，我不得不用来自那里的源代码替换整个插件：https://github.com/froala/wysiwyg-editor。