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");  //←ここでエラー
  

こんな、エラーが発生します。↓

JavaScriptエラー

で、よくよく調べてみたら、意外なところに落とし穴がありました。

ヒントがあったのは、このページ。
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");
  

最初のコンストラクタのみ、オブジェクトを返すので、メソッドチェーンはできません。

なぜ? どうせならオブジェクトをそのまま返してくれればいいだけなのに(笑)。

 
 

お気軽にコメントをどうぞ〜

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントフィード

s