CodeMirriorコンストラクタの罠
いま、Qt の QtWebKit Bridge（http://qt-project.org/doc/qt-5/qtwebkit-bridge.html）という機能を使っての、MacOSXアプリケーションをつくっています。
いわゆるMarkdown記法を元に、アウトラインを作りながら書いていく、日本語入力のエディタを考えていて、
エディタ部分には、CodeMirroir というライブラリを使います。
ただ、どうもCodeMirrior のコンストラクタで、エディタのインスタンスが、生成されていないみたい。
editor = CodeMirror(document.body, {
value: "\n",
mode: "markdown",
smartIndent: false,
tabSize: 2,
indentWithTabs: true,
electricChars: false,
lineWrapping: true,
lineNumbers: true,
foldGutter: true,
enableCompositionMod: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}).on(
//Changeイベント
'change', function() {
//alert('changes!');
jsBridge.changes();
});
editor.setValue("abc"); //←ここでエラー
こんな、エラーが発生します。↓
で、よくよく調べてみたら、意外なところに落とし穴がありました。
ヒントがあったのは、このページ。
https://groups.google.com/d/msg/codemirror/DfR57zf6k18/9kLma4I6dagJ
CodeMirrior は、jQueryみたいにオブジェクトを返さないよー、とある。
な、ん、だ、と・・・
完全に、jQuery脳っていうか、JavaScript的に考えれば、オブジェクトを返すはずで、メソッドチェーンするのは当然だと思ってました。
いや、ふつうそうじゃないのか・・・
なんで、CodeMirrior ではできないのか？
答え：そういう仕様だから(笑)。
コンストラクタした内容をオブジェクト変数に入れて、使い回すことはできない。これ、仕様。
だから、こう書きます。
editor = CodeMirror(document.body, {
value: "\n",
mode: "markdown",
smartIndent: false,
tabSize: 2,
indentWithTabs: true,
electricChars: false,
lineWrapping: true,
lineNumbers: true,
foldGutter: true,
enableCompositionMod: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}).on(
editor.on(
//Changeイベント
'change', function() {
//alert('changes!');
jsBridge.changes();
});
editor.setValue("abc");
最初のコンストラクタのみ、オブジェクトを返すので、メソッドチェーンはできません。
なぜ？ どうせならオブジェクトをそのまま返してくれればいいだけなのに(笑)。
コメントフィード