如何通过requirejs加载ckeditor

发布于 2024-12-23 16:55:41 字数 300 浏览 1 评论 0原文

我在尝试通过 requirejs 加载 ckeditor 时遇到问题（我尝试将主 ckeditor js 文件转换为单独的模块，但这导致一切都崩溃了），所以我现在正在检查是否有一个非常我错过了执行此操作的简单方法。

我知道 requirejs 允许你加载普通的 js 脚本，所以也许只是加载 ckeditor.js 文件（未编辑，所以它仍然是一个 IIFE/自执行函数） - 这是否可以与 requirejs 一起使用，或者如果你使用 requirejs 来加载模块，那么整个项目是否需要基于模块？

任何帮助表示赞赏。

亲切的问候，标记

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

〆凄凉。 2024-12-30 16:55:41

或者，您可以创建一个 RequireJS shim 以正确的顺序加载内容，并将正确的 RequireJS 模块名称别名为 CKEditor 分发文件。

这意味着你的模块仍然声明它依赖于 CKEditor，这比让它神奇地显示要好得多。

require.config({
shim: {
    'ckeditor-jquery':{
        deps:['jquery','ckeditor-core']
    }
},
 paths: {
    "jquery": '/javascript/jquery-1.7.1/jquery.min',
    'ckeditor-core':'/javascript/ckeditor-3.6.4/ckeditor',
    'ckeditor-jquery':'/javascript/ckeditor-3.6.4/adapters/jquery'
}
});

然后在模块中，您可以依赖 ckeditor-jquery （或 ckeditor-core，如果您不需要 jQuery 集成）并知道它将可用：

require(
[
    "jquery",
    "ckeditor-jquery"
],
function( _jquery_ ) {

    $('#editorContent2').ckeditor({
        customConfig : '',
        skin:'office2003'
    });
}
}

Alternatively, you can create a RequireJS shim to load things in the correct order, and alias proper RequireJS module names to the CKEditor distribution files.

This means your module still declares it is dependant on CKEditor, which is a lot nicer than having it just show up by magic.

require.config({
shim: {
    'ckeditor-jquery':{
        deps:['jquery','ckeditor-core']
    }
},
 paths: {
    "jquery": '/javascript/jquery-1.7.1/jquery.min',
    'ckeditor-core':'/javascript/ckeditor-3.6.4/ckeditor',
    'ckeditor-jquery':'/javascript/ckeditor-3.6.4/adapters/jquery'
}
});

then in a module you can depend on ckeditor-jquery (or ckeditor-core for that matter, if you don't need the jQuery integration) and know it'll be available:

require(
[
    "jquery",
    "ckeditor-jquery"
],
function( _jquery_ ) {

    $('#editorContent2').ckeditor({
        customConfig : '',
        skin:'office2003'
    });
}
}

回复收藏 0 原文

弥繁 2024-12-30 16:55:41

另一种方法可以做到这一点：

var require = {
    "shim": {
        "path/foo/ckeditor/ckeditor": { "exports": "CKEDITOR" }
    }
};

define(['moduleX', 'path/foo/ckeditor/ckeditor'], function (x, ckeditor) { 

     ckeditor.editor.prototype.fooFunc = function() {

     };
});

Another way to do that:

var require = {
    "shim": {
        "path/foo/ckeditor/ckeditor": { "exports": "CKEDITOR" }
    }
};

define(['moduleX', 'path/foo/ckeditor/ckeditor'], function (x, ckeditor) { 

     ckeditor.editor.prototype.fooFunc = function() {

     };
});

回复收藏 0 原文

左秋 2024-12-30 16:55:41

好吧，看来我在这里回答了我自己的问题。

我没有尝试将 ckeditor 分解为模块，而是使用 RequireJs 来完整加载脚本。

require(['require', 'dependancy-A', 'dependancy-B', 'dependancy-C'], function(require, A, B, C){

    // this = [object DOMWindow]
    // CKEDITOR_BASEPATH is a global variable
    this.CKEDITOR_BASEPATH = '/ckeditor/';

    require(['/ckeditor/ckeditor'], function(){
        // Code to create a new editor instance
    });

});

````

OK, it seems I answered my own question here.

Instead of trying to break ckeditor down into modules I just used RequireJs to load the script in it's entirety.

require(['require', 'dependancy-A', 'dependancy-B', 'dependancy-C'], function(require, A, B, C){

    // this = [object DOMWindow]
    // CKEDITOR_BASEPATH is a global variable
    this.CKEDITOR_BASEPATH = '/ckeditor/';

    require(['/ckeditor/ckeditor'], function(){
        // Code to create a new editor instance
    });

});

```

回复收藏 0 原文

~没有更多了~