2012-01-03 4 views
12

requirejs経由でckeditorをロードしようとすると問題が発生しています(メインのckeditor jsファイルを個々のモジュールに変換しようとしましたが、今私が逃したこれを行うための非常に簡単な方法があるかどうかを確認する。requirejs経由でckeditorをロードする方法

requirejsは通常のjsスクリプトを読み込むことができるので、ckeditor.jsファイルを読み込むだけです(まだ編集されていないので、まだIIFE /自己実行機能です)。モジュールをロードするためにrequirejsを使用すると、プロジェクト全体がモジュールベースである必要がありますか?

助けてください。

敬具、 マーク

答えて

-2

OK、私がここで自分の質問に答えたそうです。

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

}); 

`` `

+7

JavaScriptのタグをCkEditorをロードする。これは、このモジュールが実行されるまでにCKEditorがロードされない可能性があることを意味します。 –

26

また、あなたは正しい順序で物事をロードするためにRequireJSシムを作成し、CKEditorバージョンの配布ファイルへのエイリアス適切RequireJSモジュール名ことができます。

これはあなたのモジュールがそれがCKEditorに依存していると宣言していることを意味します。これはCKEditorが魔法で表示されるよりはるかに良いです。

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

    $('#editorContent2').ckeditor({ 
     customConfig : '', 
     skin:'office2003' 
    }); 
} 
} 
:その後、モジュールにあなたは(あなたはjQueryの統合を必要としない場合は、そのことについてまたはCKEditorバージョンコア)CKEditorバージョン-jqueryのに依存し、それが利用可能になります知ることができ

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

+0

これは完璧に機能しました。私は答えがシムになることを知っていたが、私はそれを正しく行う方法を考えるのは怠惰だった。ありがたいことに、私はする必要はありませんでした。 –

+0

まだ私のために働いていない...私は、依存関係のパスが間違っていると言っているエラーを取得します。あなたが私に与えることができる他の有用な情報?ありがとう – w3jimmy

+0

@トム・チバートン、どのようにCSSを読み込むのですか? –

1

その行う別の方法:

この方法は、モジュールの依存としてCKEditorバージョンがリストされていない、との代わりに背中(の組)に落下、どちらかCKEditorバージョンをロードするためにRequireJSを使用していません
var require = { 
    "shim": { 
     "path/foo/ckeditor/ckeditor": { "exports": "CKEDITOR" } 
    } 
}; 

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

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

    }; 
}); 
関連する問題