logo
  • Home
  • ソフトウェア
    • アタッシェケースアイコン
      アタッシェケース

      ファイル暗号化ツール(Windows)

    • MarkDown#Editorアイコン
      MarkDown#Editor

      Markdownデュアルエディタ(Windows)

    • OutlineTextアイコン
      OutLineText

      Markdownによるアウトライナー(macOS)

    • OutlineTextアイコン
      BossComing

      一瞬で偽デスクトップに差し替え(Windows)

  • 開発ツール
    • Png2WinIco

      PNGからWindowsICOファイル生成(Windows)

    • SHCode-JP-Zen-Haku

      プログラミング用等幅フォント(Windows, macOS)

    • 秀丸エディタ・日付挿入マクロ

      柔軟な日付挿入可能な「秀丸エディタ」専用マクロ

    • 秀丸エディタ・Markdown強調表示定義ファイル

      「秀丸エディタ」専用の強調表示定義ファイル

  • このサイトについて
  • ブログ
  1. Home
  2. Blog
2019年07月02日 17:33 更新

CodeMirriorコンストラクタの罠

hibara

2014年5月19日 22:40 JavaScript jQuery Qt プログラミング

いま、Qt の QtWebKit Bridge(http://qt-project.org/doc/qt-5/qtwebkit-bridge.html)という機能を使っての、MacOSXアプリケーションをつくっています。

いわゆるMarkdown記法を元に、アウトラインを作りながら書いていく、日本語入力のエディタを考えていて、
エディタ部分には、CodeMirroir というライブラリを使います。

ただ、どうもCodeMirrior のコンストラクタで、エディタのインスタンスが、生成されていないみたい。

[javascript]

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]

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

JavaScriptエラー

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

ヒントがあったのは、このページ。
https://groups.google.com/d/msg/codemirror/DfR57zf6k18/9kLma4I6dagJ

CodeMirrior は、jQueryみたいにオブジェクトを返さないよー、とある。

な、ん、だ、と・・・

完全に、jQuery脳っていうか、JavaScript的に考えれば、オブジェクトを返すはずで、メソッドチェーンするのは当然だと思ってました。
いや、ふつうそうじゃないのか・・・

なんで、CodeMirrior ではできないのか?

答え:そういう仕様だから(笑)。

コンストラクタした内容をオブジェクト変数に入れて、使い回すことはできない。これ、仕様。

だから、こう書きます。

[javascript]

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

[/javascript]

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

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

 
 


コメントする     返信コメントをキャンセル(閉じる)

メールアドレスが公開されることはありません。

これらの HTML タグと属性を使用できます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*

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

HiBARA blog

日々の開発作業で気づいたこと共有を。同じところで躓いている人が、 検索で辿り着けたら良いな、というスタンスで記事を書くので不定期更新になります。

Post Categories

  • BizSpark (1)
  • C# (10)
  • C++ (2)
  • C++Builder (2)
  • C++Builder XE4 (1)
  • CoffeeScript (3)
  • DynamoDB (2)
  • Electron (1)
  • Inno Setup (3)
  • iPhone (1)
  • JavaScript (11)
  • jQuery (3)
  • Mac OSX (2)
  • Markdown (2)
  • MarkDown#Editor (5)
  • PHP (7)
  • Qt (5)
  • SHA-3 (2)
  • Smarty (2)
  • アタッシェケース (23)
  • など (2)
  • フォント (1)
  • プログラミング (33)
  • 未分類 (1)

Tags

  • DLL
  • exe
  • Inno Setup
  • NuGet
  • signtool
  • コードサイニング証明
  • サテライトアセンブリ
  • マージ
  • 光コラボレーション
  • 株式会社CL

© 2011-2023 M.Hibara

Facebook icon
Twitter icon
GitHub icon
Qiita icon