如何在我的应用程序代码中使用RequireJS，grunt和uglify结合CKEditor？
这是我的'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'
});
最后...这些都是我在Firebug中遇到的错误，当我尝试使用生成的粗体代码加载CKEditor时（在开发环境中进行优化之前，它完美地工作）：
"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])}...
我尝试使用'皮肤：../path/to/ckeditor/css/files'在CKEditor实例化代码中设置路径，但这也不起作用。 顺便说一句，我也尝试从网站下载CKEditor，并用'boswer install ckeditor'重新安装它，但是一旦使用grunt将它们合并到我的代码中，它就无法工作。
任何人都可以看到我做错了什么？ 还有其他人有这个工作吗？ 我确信那里的人必须有它的工作，这只是我的无知让我回来。
w00t！ 解决它：D
如果像我一样，你有一个Symfony2应用程序，并且你正在使用RequireJS中的多页填充设置来跟踪这些真棒幻灯片，那么解决上述CKEditor问题的方法是在你的_requirejs.html中包含以下行。在requirejs.config（{..}）行之上的twig文件：
var CKEDITOR_BASEPATH = '{{ app.request.basePath }}/{{ assetsPath }}/vendor/ckeditor/';
您现在应该可以在优化的生产环境中加载CKEditor实例，而不会出现任何错误。 请享用！
你可以简单地解决它。
使用'ckeditor-jquery'和'ckeditor-core'作为requirejs中的一个单独模块。 所以你的grunt文件必须是这样的：
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;
})()
}
},
上一篇: How to combine CKEditor in my app code using RequireJS, grunt and uglify?
下一篇: Extending String.prototype performance shows that function calls are 10x faster