这是我的’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并将其组合到我的代码中就无法使其工作.
谁能看到我做错了什么？有没有其他人有这个工作？我相信那里的人必须让它工作,这只是我的无知阻止我.
解决方法
w00t！解决了它：D
如果像我一样,你有一个Symfony2应用程序并且你正在使用RequireJS中的多页填充程序设置跟踪these awesome slides,那么使用CKEditor解决上述问题就是在_requirejs.html.twig文件中包含以下行就在requirejs.config({..})行的上方：
var CKEDITOR_BASEPATH = '{{ app.request.basePath }}/{{ assetsPath }}/vendor/ckeditor/';
您现在应该能够在优化的生产环境中加载CKEditor实例而不会出现任何错误.请享用！