tracwysiwygplugin

12
TracWysiwygPlugin 19-Jan-2008 <[email protected]> TracWysiwygPlugin

Upload: jun-omae

Post on 07-Nov-2014

3.515 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: TracWysiwygPlugin

TracWysiwygPlugin

19-Jan-2008 <[email protected]>

TracWysiwygPlugin

Page 2: TracWysiwygPlugin

TracWysiwygPlugin

自己紹介

大前 潤 (おおまえ じゅん) jun66j5 TracWysiwygPlugin 作ってます

http://trac-hacks.org/wiki/TracWysiwygPlugin

Page 3: TracWysiwygPlugin

TracWysiwygPlugin

で。

TracWysiwygPlugin の紹介

Page 4: TracWysiwygPlugin

TracWysiwygPlugin

できること #1 WYSIWYG として一通りの機能

ボールド、イタリック、下線

上記のものに対するキーバインド

等幅フォント、上付き文字、下付き文字、取り消し線

ヘッダ1 ~ ヘッダ6、コードブロック、引用

箇条書き、番号付きリスト

テーブル - 行及び列の追加・削除、セル内の編集

Word/Excel からのテーブル貼り付け、それなりに

Page 5: TracWysiwygPlugin

TracWysiwygPlugin

できること #2 自動リンク

URL 文字列

TracLinks 文字列

autolink チェックボックスで on/off 可能

編集モードをその場で切り替え可能(textarea <=> wysiwyg)

切り替え時にサーバに問い合わせない

Trac 0.10, Trac 0.11 に対応

Firefox 2, IE6/7, Opera 9, Safari 3 に対応

Safari 2 は部分的にだけ対応

Page 6: TracWysiwygPlugin

TracWysiwygPlugin

できないこと

Trac Wiki で表現できないような HTML テーブルの中にテーブルやリスト

引用の中にテーブルやリスト

マクロの展開

Processor つき code block の展開

dl/dt/dd の生成

文字色、背景色、文字サイズの指定

Page 7: TracWysiwygPlugin

TracWysiwygPlugin

実装

ほとんどの実装が javascript javascript : python = 98% : 2% WYSIWYG エディタはフルスクラッチ

TracWiki テキスト <=> DOM 変換器

python は javascript のロードをお膳立てするだけ

WYSIWYG エディタのロード

<textarea class="wikitext"> を探して iframe, WYSIWYG 用ツールバーを生成

Trac Wiki のツールバーと同じ戦略

wiki ページに限らずすべてのページで WYSIWYG が有効に

Page 8: TracWysiwygPlugin

TracWysiwygPlugin

インストールなしで使う

プラグインをインストールせずに 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')

Page 9: TracWysiwygPlugin

TracWysiwygPlugin

trac-hacks.org

Page 10: TracWysiwygPlugin

TracWysiwygPlugin

trac.edgewall.org

Page 11: TracWysiwygPlugin

TracWysiwygPlugin

(できそうなら)やりたいこと

リンク編集ダイアログ

window.prompt() しょぼい

WikiPageName 補完機能

Wiki、チケット検索機能

文字色、背景色、文字サイズの指定

[[html()]] マクロ

Page 12: TracWysiwygPlugin

TracWysiwygPlugin

おしまい