如何使用 RequireJS、grunt 和 uglify 在我的应用程序代码中结合 CKEditor？

Question

这是我的“common.js”文件：

requirejs.config({
paths: {
    domReady: '../vendor/requirejs-domready/domReady',
    jquery: 'lib/jquery',
    datatables: '../vendor/datatables/media/js/jquery.dataTables.min',
    tabletools: '../vendor/datatables/extensions/TableTools/js/dataTables.tableTools',
    fixedheader: '../vendor/datatables/extensions/FixedHeader/js/dataTables.fixedHeader.min',
    'datatables-bootstrap': '../vendor/datatables-bootstrap3-plugin/media/js/datatables-bootstrap3.min',
    jeditable: '../vendor/jeditable/jeditable',
    routing: '../../bundles/fosjsrouting/js/router',
    routes: '../vendor/fosjsrouting/fos_js_routes',
    'ckeditor-core':'../vendor/ckeditor/ckeditor',
    'ckeditor-jquery':'../vendor/ckeditor/adapters/jquery',
    selectize: '../vendor/selectize/dist/js/selectize.min',
    sifter: '../vendor/sifter/sifter.min',
    microplugin: '../vendor/microplugin/src/microplugin',
    datepicker: '../vendor/zebra-datepicker/public/javascript/zebra_datepicker',
    bootstrap: '../vendor/bootstrap/dist/js/bootstrap.min'
},
shim: {
    bootstrap: {
        deps: ['jquery']
    },
    jeditable: {
        deps: ['jquery']
    },
    routing: {
        exports: 'Routing'
    },
    routes: {
        deps: ['routing']
    },
    'ckeditor-jquery':{
        deps:['jquery','ckeditor-core']
    },
    selectize: {
        deps: ['jquery', 'sifter', 'microplugin']
    },
    'tabletools': {
        deps: ['datatables']
    },
    'fixedheader': {
        deps: ['datatables']
    }
}
});

..这是我的 Gruntfile.js 的相关部分：

requirejs: {
        main: {
            options: {
                mainConfigFile: '<%= appDir %>/js/common.js',
                appDir: '<%= appDir %>',
                baseUrl: './js',
                dir: '<%= builtDir %>',
                optimizeCss: "none",
                optimize: "none",

                modules: [
                    {
                        name: 'common',
                        include: ['jquery', 'domReady', 'bootstrap', 'ckeditor-jquery', 'selectize', 'jeditable', 'datepicker', 'routing', 'routes']
                    },
                    {
                        name: 'app/mycode',
                        exclude: ['common']
                    },

                    // other app/<mycode> entries that exclue common, as above
                ]
            }
        }
    },

    uglify: {
        options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
            compress: {
                drop_console: true // <-remove console.log statements
            }
        },
        build: {

            files: (function() {

                var files = [];
                jsFilePaths.forEach(function(val) {
                    files.push({
                        expand: true,
                        cwd: '<%= builtDir %>',
                        src: val,
                        dest: '<%= builtDir %>'
                    });
                });

                return files;
            })()
        }
    },

...这就是我在代码中实例化 CKEditor 的方式：

$('.ckeditor').ckeditor({
                customConfig: '',
                toolbarGroups: [
                    {"name": "basicstyles", "groups": ["basicstyles"]},
                    {"name": "links", "groups": ["links"]},
                    {"name": "paragraph", "groups": ["list", "blocks"]},
                    {"name": "document", "groups": ["mode"]},
                    {"name": "insert", "groups": ["insert"]},
                    {"name": "styles", "groups": ["styles"]},
                    {"name": "about", "groups": ["about"]}
                ],
                removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,SpecialChar,About,Source',
                removePlugins: 'magicline'
            });

最后...这些是我在生产环境中尝试使用我的丑陋代码加载 CKEditor 时在 Firebug 中遇到的错误（在我的开发环境中优化之前它可以完美运行）：

    "NetworkError: 404 Not Found - http://ams.lprod/skins/moono/editor_gecko.css?t=F0RF"
editor_...?t=F0RF

"NetworkError: 404 Not Found - http://ams.lprod/lang/en-gb.js?t=F0RF"
en-gb.js?t=F0RF

TypeError: d[a] is undefined
    ...is.detect(b,a));var d=this,b=function( {d[a].dir=d.rtl[a]?"rtl":"ltr",c(a,d[a])}...

我尝试使用“皮肤：../path/to/ckeditor/css/files”在 CKEditor 实例化代码中设置路径，但这也不起作用。顺便说一句，我也尝试从网站下载 CKEditor 并使用“boswer install ckeditor”重新安装它，但一旦使用 grunt 将其丑化并合并到我的代码中，它就无法正常工作。

谁能看到我做错了什么？其他人有这个工作吗？我敢肯定，外面的人一定可以让它工作，只是我的无知阻碍了我。

Answer 1

w00t！！解决了：D

如果像我一样，你有一个 Symfony2 应用程序，并且你正在关注 these awesome slides，并在 RequireJS 中设置了多页 shim，那么使用 CKEditor 解决上述问题的方法是在你的 _requirejs 中包含以下行.html.twig 文件就在 requirejs.config({..}) 行上方：

var CKEDITOR_BASEPATH = '{{ app.request.basePath }}/{{ assetsPath }}/vendor/ckeditor/';

您现在应该能够在优化的生产环境中加载 CKEditor 实例而不会出现任何错误。尽情享受吧！

Answer 2

你可以简单地解决它。

在 requirejs 中使用 'ckeditor-jquery' 和 'ckeditor-core' 作为单独的模块。 所以你的 grunt 文件必须是这样的：

requirejs: {
    main: {
        options: {
            mainConfigFile: '<%= appDir %>/js/common.js',
            appDir: '<%= appDir %>',
            baseUrl: './js',
            dir: '<%= builtDir %>',
            optimizeCss: "none",
            optimize: "none",

            modules: [
                {
                    name: 'common',
                    include: ['jquery', 'domReady', 'bootstrap', 'selectize', 'jeditable', 'datepicker', 'routing', 'routes']
                },
                {
                    name: 'app/mycode',
                    exclude: ['common']
                },
                {
                  name: 'ckeditor-jquery',

                  exclude: ["common"]
                },
                {
                  name: 'ckeditor-core',

                  exclude: ["common"]
                }

                // other app/<mycode> entries that exclue common, as above
            ]
        }
    }
},

uglify: {
    options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        compress: {
            drop_console: true // <-remove console.log statements
        }
    },
    build: {

        files: (function() {

            var files = [];
            jsFilePaths.forEach(function(val) {
                files.push({
                    expand: true,
                    cwd: '<%= builtDir %>',
                    src: val,
                    dest: '<%= builtDir %>'
                });
            });

            return files;
        })()
    }
},