1. TracWysiwygPlugin
19-Jan-2008 <jun66j5@gmail.com>
TracWysiwygPlugin

2. 自己紹介
 大前 潤 (おおまえ じゅん)
 jun66j5
 TracWysiwygPlugin 作ってます
 http://trac-hacks.org/wiki/TracWysiwygPlugin
TracWysiwygPlugin

3. で。
TracWysiwygPlugin の紹介
TracWysiwygPlugin

4. できること #1
 WYSIWYG として一通りの機能

ボールド、イタリック、下線

上記のものに対するキーバインド

等幅フォント、上付き文字、下付き文字、取り消し線
 ヘッダ1 ～ ヘッダ6、コードブロック、引用

箇条書き、番号付きリスト
 テーブル - 行及び列の追加・削除、セル内の編集
 Word/Excel からのテーブル貼り付け、それなりに
TracWysiwygPlugin

5. できること #2

自動リンク
 URL 文字列
 TracLinks 文字列
 autolink チェックボックスで on/off 可能

編集モードをその場で切り替え可能
(textarea <=> wysiwyg)

切り替え時にサーバに問い合わせない
 Trac 0.10, Trac 0.11 に対応
 Firefox 2, IE6/7, Opera 9, Safari 3 に対応
 Safari 2 は部分的にだけ対応
TracWysiwygPlugin

6. できないこと
 Trac Wiki で表現できないような HTML

テーブルの中にテーブルやリスト

引用の中にテーブルやリスト

マクロの展開
 Processor つき code block の展開
 dl/dt/dd の生成

文字色、背景色、文字サイズの指定
TracWysiwygPlugin

7. 実装
 ほとんどの実装が javascript
 javascript : python = 98% : 2%
 WYSIWYG エディタはフルスクラッチ
 TracWiki テキスト <=> DOM 変換器
 python は javascript のロードをお膳立てするだけ
 WYSIWYG エディタのロード
 <textarea class=quot;wikitextquot;> を探して iframe, WYSIWYG 用ツールバー
を生成
 Trac Wiki のツールバーと同じ戦略
 wiki ページに限らずすべてのページで WYSIWYG が有効に
TracWysiwygPlugin

8. インストールなしで使う
プラグインをインストールせずに bookmarklet でロード
javascript:(function(d,u){var s=d.createElement('script');s.charset='utf-8';
s.src=u;d.getElementsByTagName('head')[0].appendChild(s)})
(document,'http://trac-hacks.org/svn/tracwysiwygplugin/0.10/bookmarklet.js')
TracWysiwygPlugin

9. trac-hacks.org
TracWysiwygPlugin

10. trac.edgewall.org
TracWysiwygPlugin

11. (できそうなら)やりたいこと

リンク編集ダイアログ
 window.prompt() しょぼい
 WikiPageName 補完機能
 Wiki、チケット検索機能

文字色、背景色、文字サイズの指定
 [[html()]] マクロ
TracWysiwygPlugin

12. おしまい
TracWysiwygPlugin