Wie kombiniere ich CKEditor in meinem App-Code mit RequireJS, grunt und uglify?

Question

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

..und hier ist der relevante Teil meiner 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; 
      })() 
     } 
    }, 

... und das ist, wie ich CKEditor instanziiert in meinem 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' 
      }); 

Schließlich ... das sind die Fehler, die ich in Firebug zu bekommen, wenn ich versuche CKEditor mit meinem uglified Code auf der Produktion zu laden (es funktioniert perfekt zuvor in meinem dev environ Optimierung ment):

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

Ich habe versucht, mit dem Papierweg in der CKEditor Instanziierung Code einzustellen Fellen: ../path/to/ckeditor/css/files ', aber das funktioniert auch nicht. Übrigens habe ich auch versucht, CKEditor von der Website herunterzuladen und es neu mit 'boswer install ckeditor' zu installieren, aber ich kann es nicht funktionieren, wenn es erst einmal ugglifiziert und mit grunt in meinen Code integriert wurde.

Kann jemand sehen, was ich falsch mache? Hat jemand anderes das funktioniert? Ich bin mir sicher, dass Leute da draußen arbeiten müssen und es ist nur meine Ignoranz, die mich zurückhält.

Answer 1

w00t !! Gelöst: D

Wenn Sie wie ich eine Symfony2-App haben und in RequireJS mit einer mehrseitigen Shim-Konfiguration these awesome slides folgen, dann besteht die Lösung des obigen Problems mit CKEditor darin, die folgende Zeile einzufügen in Ihrer _requirejs.html.twig Datei direkt über dem requirejs.config ({..}) Zeile:

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

Sie sollten nun in der Lage sein, ohne Fehler eine CKEditor Instanz in Ihrer optimierte Produktionsumgebung zu laden. GENIESSEN!

Answer 2

können Sie es einfach lösen.

Verwenden Sie 'ckeditor-jquery' und 'ckeditor-core' als separates Modul in requirejs. so muss Ihre Grunt-Datei so sein:

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