Come combinare CKEditor nel mio codice app usando RequireJS, grunt e uglify?

Question

Ecco il mio file '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'] 
    } 
} 
}); 

..e qui è la parte rilevante delle mie 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; 
      })() 
     } 
    }, 

... e questo è come mi un'istanza di CKEditor nel mio codice:

$('.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' 
      }); 

Infine ... questi sono gli errori che ottengo in Firebug quando provo a caricare CKEditor usando il mio codice uglified sulla produzione (funziona perfettamente prima di ottimizzare nel mio dev environ 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])}... 

ho cercato di impostare il percorso all'interno del codice CKEditor esemplificazione usando 'skins: ../path/to/ckeditor/css/files', ma che non funziona neanche. Per inciso, ho anche provato a scaricare CKEditor dal sito Web e a installarlo con "boswer install ckeditor" ma non riesco a farlo funzionare una volta che è stato migliorato e combinato nel mio codice usando grunt.

Qualcuno può vedere cosa sto facendo male? Qualcun altro ha questo lavoro? Sono sicuro che la gente là fuori deve farlo funzionare ed è solo la mia ignoranza che mi trattiene.

Answer 1

w00t !! Risolto: D

Se, come me, hai un'applicazione Symfony2 e stai seguendo these awesome slides con una configurazione spessore multi-pagina in RequireJS, poi soluzione al problema di cui sopra con CKEditor è quello di includere la seguente riga nel file _requirejs.html.twig appena sopra il requirejs.config ({..}) linea:

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

Si dovrebbe ora essere in grado di caricare un'istanza CKEditor nell'ambiente di produzione ottimizzato senza errori. GODERE!

Answer 2

puoi semplicemente risolverlo.

utilizzare 'ckeditor-jquery' e 'ckeditor-core' come modulo separato in requirejs. così il tuo file grunt deve essere così:

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