javascript – 如何使用RequireJS,grunt和uglify在我的应用程序代码中组合CKEditor?

这是我的’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'
            });

最后……当我尝试在生产中使用我的uglified代码加载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])}...

我试图使用’skins:../ path / to / fixitor / css / files’在CKEditor实例化代码中设置路径,但这也不起作用.顺便提一下,我也尝试从网站上下载CKEditor并使用’boswer install ckeditor’重新安装它,但是一旦使用grunt并将其组合到我的代码中就无法使其工作.

谁能看到我做错了什么?有没有其他人有这个工作?我相信那里的人必须让它工作,这只是我的无知阻止我.

解决方法@H_301_22@
w00t!解决了它:D

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

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

您现在应该能够在优化的生产环境中加载CKEditor实例而不会出现任何错误.请享用!

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...