这是我的’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({ 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实例而不会出现任何错误.请享用!
如果像我一样,你有一个Symfony2应用程序并且你正在使用RequireJS中的多页填充程序设置跟踪these awesome slides,那么使用CKEditor解决上述问题就是在_requirejs.html.twig文件中包含以下行就在requirejs.config({..})行的上方:
var CKEDITOR_BASEPATH = '{{ app.request.basePath }}/{{ assetsPath }}/vendor/ckeditor/';
您现在应该能够在优化的生产环境中加载CKEditor实例而不会出现任何错误.请享用!