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

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用RequireJS,grunt和uglify在我的应用程序代码中组合CKEditor?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的’common.js’文件
  1. requirejs.config({
  2. paths: {
  3. 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'
  4. },shim: {
  5. bootstrap: {
  6. deps: ['jquery']
  7. },jeditable: {
  8. deps: ['jquery']
  9. },routing: {
  10. exports: 'Routing'
  11. },routes: {
  12. deps: ['routing']
  13. },'ckeditor-jquery':{
  14. deps:['jquery','ckeditor-core']
  15. },selectize: {
  16. deps: ['jquery','sifter','microplugin']
  17. },'tabletools': {
  18. deps: ['datatables']
  19. },'fixedheader': {
  20. deps: ['datatables']
  21. }
  22. }
  23. });

..这里是我的Gruntfile.js的相关部分:

  1. requirejs: {
  2. main: {
  3. options: {
  4. mainConfigFile: '<%= appDir %>/js/common.js',appDir: '<%= appDir %>',baseUrl: './js',dir: '<%= builtDir %>',optimizeCss: "none",optimize: "none",modules: [
  5. {
  6. name: 'common',include: ['jquery','domReady','bootstrap','ckeditor-jquery','selectize','jeditable','datepicker','routing','routes']
  7. },{
  8. name: 'app/mycode',exclude: ['common']
  9. },// other app/<mycode> entries that exclue common,as above
  10. ]
  11. }
  12. }
  13. },uglify: {
  14. options: {
  15. banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',compress: {
  16. drop_console: true // <-remove console.log statements
  17. }
  18. },build: {
  19.  
  20. files: (function() {
  21.  
  22. var files = [];
  23. jsFilePaths.forEach(function(val) {
  24. files.push({
  25. expand: true,cwd: '<%= builtDir %>',src: val,dest: '<%= builtDir %>'
  26. });
  27. });
  28.  
  29. return files;
  30. })()
  31. }
  32. },

…这就是我在代码中实例化CKEditor的方法

  1. $('.ckeditor').ckeditor({
  2. customConfig: '',toolbarGroups: [
  3. {"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"]}
  4. ],removeButtons: 'Underline,Strike,Subscript,Superscript,Anchor,Styles,SpecialChar,About,Source',removePlugins: 'magicline'
  5. });

最后……当我尝试在生产中使用我的uglified代码加载CKEditor时,这些是我在Firebug中遇到的错误(在我的开发环境中优化之前它完美地工作):

  1. "NetworkError: 404 Not Found - http://ams.lprod/skins/moono/editor_gecko.css?t=F0RF"
  2. editor_...?t=F0RF
  3.  
  4. "NetworkError: 404 Not Found - http://ams.lprod/lang/en-gb.js?t=F0RF"
  5. en-gb.js?t=F0RF
  6.  
  7. TypeError: d[a] is undefined
  8. ...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({..})行的上方:

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

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

猜你在找的JavaScript相关文章