- 2007-04-03 (Tue) 2:16
- JavaScript
PostEditorというオンラインエディタがなかなか便利です。WYSIWYGではないですが、いろいろと便利なSnipetがあり、HTMLとJavaScriptのコードを書くのに特化している模様。mootools.jsのプラグインで、mootoolsは最新のSubversion版でないと動かないっぽいです。「language.FORUM.js」にSnipetの設定が書いてあり、これらを読み込んで使います。※SafariとFirefoxのみ対応らしいです。
<script type="text/javascript" xsrc="/js/mootools.js" mce_src="/js/mootools.js" ></script> <script type="text/javascript" xsrc="/js/posteditor.js" mce_src="/js/posteditor.js" ></script> <script type="text/javascript" xsrc="/js/language.FORUM.js" mce_src="/js/language.FORUM.js" ></script> <form> <textarea name="body" id="body" class="textarea" rows="8" cols="40"></textarea> </form> <script type="text/javascript"> new postEditor.create('body','body2',language.FORUM); </script>
一番の特徴は「tab」を使うところかなと。まず普通に「tab」を押すと「半角スペース×4」が入力されます。「半角スペース×4」というのがいいですよね。主な機能は以下の通り。
- オートインデント
- Snipetをタブで呼び出す（ul+tabなど）
- Snipetをタブで自動補完（ol+tab+tabとtabを続けて押すとli挿入、次のli挿入）
- ダイナミックSnipet（date+tabで今日の日付）
- ２つセットで使う文字を自動補完（」となる）
- スコープを判断して括弧で括る
- 選択したテキストをタグで挟むショートカット（ctrl+shift+[0-9]）
Snipetは以下の通り。Snipetを入力しtabを押すと補完されます。（strongと打ち込んでtabを押す など）
- strong, em, blockquote, code, javascript, html, bq, js, {（閉じとセットで挿入）
- $, new Class, .extend, a
- ul, ol
- </li>の後ろでtabを押すと次のliを挿入
「$ + tab」は「$(’id’).」に、「a + tab」は「>a xhref=”http://” mce_href=”http://” title=”desc”<text</a> 」になります。「.extend」は以下のように整形されます。
.extend({ initialize: function(value){ } });
また、「new Class + tab」は「<javascript></javascript>」内で使うと以下のようにinitialize:を挿入しフォーマットしてくれます。
<javascript> new Class({ initialize: function(value){ this.key = value; } }); </javascript>
そしてデフォルトのショートカットは以下の通り。7〜9は選択範囲のみ適用されます。
- ctrl+shift+0 → <strong>
- ctrl+shift+1 → <em>
- ctrl+shift+2 → <blockquote>
- ctrl+shift+3 → <code>
- ctrl+shift+4 → <javascript>
- ctrl+shift+5 → <html>
- ctrl+shift+6 → <a xhref=”" mce_href=”" >
- ctrl+shift+7 → 選択範囲を小文字に
- ctrl+shift+8 → 選択範囲を大文字に
- ctrl+shift+9 → 選択範囲の<>を<>に
divとかはないみたいですが、登録されているSnipetがかゆい所に手が届く感じなので、コードを織り交ぜたblogを書く際にはとても便利だなと思います。自分の場合は今回のエントリーを書く際に重宝しました。Snipetを変更すれば自分好みにカスタマイズも可能かと。
■mootools関連エントリー：
＞ javascriptで伸縮するメニューができる
＞ JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools）
Comments:0
Trackbacks:2
- Trackback URL for this entry
- http://loconet.web2.jp/blog/archives/2007/04/javascriptmooto_1.html/trackback/
- Listed below are links to weblogs that reference
- JavaScript(mootools)でSnipet付きエディタ from webデザイナーのナナメガキ
- trackback from Rente 09-05-01 (Fri) 7:20
-
Bij het voorspellen van de ren…
Een ingrijpende verandering die gaat plaatsvinden op het gebied van pensioenen is de (more…)
- trackback from kortings code 11-04-21 (Thu) 4:06
-
De beste kortings codes en bes…
Kortings code, voucher code, bespaar code, als je er maar korting mee krijgt! (more…)