JavaScript/WYSIWYGエディタ/contenteditable属性 + readonly

• [ Prev ]
• [ Next ]
• [ JavaScript ]

WYSIWYGエディタを作るための基本的な仕組みとして、"contenteditable"属性や"designMode"プロパティがある。

• The WHATWG Blog — The Road to HTML 5: contentEditable
  • http://blog.whatwg.org/the-road-to-html-5-contenteditable
• Mozilla におけるリッチテキスト編集 | MDN
  • https://developer.mozilla.org/ja/docs/Rich-Text_Editing_in_Mozilla
• designMode property (document) JavaScript
  • http://help.dottoro.com/ljvqvntb.php
• contentEditable attribute HTML & XHTML
  • http://help.dottoro.com/lhwqtkhj.php

ヒント：

• 簡易WYSIWYGエディタを作る - Archiva
  • http://archiva.jp/web/javascript/wysiwyg.html
• リッチテキスト編集 仕様
  • http://www.mozilla-japan.org/editor/midas-spec.html
    • (ちょっと古い)
• Iframe の designMode="on" によるリッチテキストエディット - 技術メモ帳
  • http://d.hatena.ne.jp/lurker/20060930/1159617939

ここで、"contenteditable"属性を有効にした領域をreadonly扱いにするには、keydownイベントでイベント伝播をストップすればよい。
具体的には、jQueryの場合はkeydownイベントがfalseを返せば良い。

• .keydown() | jQuery API Documentation
  • http://api.jquery.com/keydown/
• jQueryでキーボード入力をキャンセルする方法
  • http://jquery.nj-clucker.com/basic/ctrl_key_input_event/
• jQuery: Keypressed and keydown event propagation in IE and Firefox
  • http://benohead.com/jquery-keypressed-keydown-event-propagation-ie-firefox/
• Stop keypress event - Stack Overflow
  • http://stackoverflow.com/questions/1404583/stop-keypress-event

• 各ブラウザのキーコード表[JavaScript]
  • http://www.programming-magic.com/file/20080205232140/keycode_table.html
• jQueryでキーボードのキーコードを調べる方法 | BlackFlag
  • http://black-flag.net/jquery/20110630-3283.html
• javascript events - jquery: keypress, ctrl+c (or some combo like that) - Stack Overflow
• JavaScriptのkeydownとkeypressの違い | TM Life
  • http://tmlife.net/programming/javascript/javascript-keydown-keypress-difference.html
    • keydownだけで良いっぽい。
  • http://stackoverflow.com/questions/4604057/jquery-keypress-ctrlc-or-some-combo-like-that
    • Ctrl-AやCtrl-←/→の単語境界移動を有効にするため、Ctrl同時押しを見分けるにはどうするか。
• Document Object Model (DOM) Level 3 Events Specification
  • http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown

上記を組み合わせたサンプル：

• http://jsfiddle.net/msakamoto_sf/wfae8hzv/

• [ Prev ]
• [ Next ]
• [ JavaScript ]