How to combine CKEditor in my app code using RequireJS, grunt and uglify?

Question

Here is my 'common.js' file:

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']
    }
}
});

..and here is the relevant part of my 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;
            })()
        }
    },

...and this is how I instantiate CKEditor in my code:

$('.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'
            });

Finally... these are the errors I get in Firebug when I try to load CKEditor using my uglified code on production (it works perfectly before optimising in my dev environment):

    "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])}...

I've tried to set the path inside the CKEditor instantiation code using 'skins: ../path/to/ckeditor/css/files' but that doesn't work either. Incidentally I've also tried downloading CKEditor from the website and installing it fresh with 'boswer install ckeditor' but can't get it work once uglified and combined into my code using grunt.

Can anyone see what I'm doing wrong? Does anyone else have this working? I'm sure folks out there must have it working and it's just my ignorance holding me back.

Answer 1

w00t!! Solved it :D

If, like me, you've got a Symfony2 app and you're following these awesome slides with a multi-page shim setup in RequireJS, then solution to the above problem with CKEditor is to include the following line in your _requirejs.html.twig file just above the requirejs.config({..}) line:

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

You should now be able to load a CKEditor instance in your optimised production environment without any errors. ENJOY!

Answer 2

you can simply solve it .

use 'ckeditor-jquery' and 'ckeditor-core' as a separate module in requirejs . so your grunt file must be like this :

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;
        })()
    }
},