Embed Size (px)
Citation preview
The New Rich Text Editor2012年8月4日
Movable Type 開発エンジニア天野卓
リッチテキストエディタ
5.1
5.2
• 編集機能が少ない
• モダンなHTMLが出力されない
• 生成されるHTMLがブラウザ毎に異なる
• カスタマイズが難しい
5.1までのエディタ
• 編集機能が多い
• モダンなHTMLが出力される
• 生成されるHTMLがブラウザ間で同じ
• カスタマイズが簡単
5.2のエディタ
TinyMCE
• 編集機能が多い
• モダンなHTMLが出力される
• 生成されるHTMLがブラウザ間で同じ
• カスタマイズが簡単
TinyMCE
• ネットブックでも快適に動作する
• 開発が活発である
• 各ブラウザの最新バージョンへの対応
• 見える形で開発が行われている
• GitHub で pull request を送信できる
TinyMCE
WYSIWYGモード
標準的な編集ボタン
MT由来のボタン
HTMLソースの挿入
HTMLソースの挿入
HTMLソースの挿入
フルスクリーンモード
フルスクリーンモード
編集領域のCSS
投稿設定
編集領域のCSS
編集領域のCSS
1 body.wysiwyg {2 background: pink;3 }
編集領域のCSS
1 body.entry {2 background: pink;3 }4 5 body.page {6 background: pink;7 }
CSSをテーマで指定
1 --- 2 id: Content CSS Sample 3 label: Content CSS Sample 4 name: Content CSS Sample 5 version: 1.0 6 class: blog 7 8 elements: 9 default_prefs:10 importer: default_prefs11 data:12 content_css: content_css.css
ソース編集モード
MT由来のボタン
フルスクリーンモード
標準的な編集ボタン
標準的な編集ボタン
出力されるHTMLに関する設定
HTMLに関する設定• HTML4と5のどちらの要素も利用できる
• 要素のチェックは基本的には行わない
• 親子関係のチェックは行う
• 属性値のチェックは行わない
• HTMLの出力を整形する
5.1以前のデータとの互換性
5.1までのエディタ• HTML4と5のどちらの要素も利用できる
• 要素のチェックは基本的には行わない
• 親子関係のチェックは行わない
• 属性値のチェックは行わない
• HTMLの出力を整形しない
5.2のエディタ• HTML4と5のどちらの要素も利用できる
• 要素のチェックは基本的には行わない
• 親子関係のチェックは行う
• 属性値のチェックは行わない
• HTMLの出力を整形する
API
5.1までのAPI
• カスタマイズ方法が用意されていない
• エディタを変更することができる
• 実装するのが非常に難しい
5.2のAPI
• カスタマイズ方法が用意されている
• エディタを変更することができる
• 実装するのが簡単
TinyMCEのカスタマイズ
オプションを変更する
http://www.tinymce.com/wiki.php/Configuration
1 id: EnterBrForTinyMCE 2 name: EnterBrForTinyMCE 3 version: 1.00 4 5 editors: 6 tinymce: 7 config: 8 force_br_newlines: true 9 force_p_newlines: ~10 forced_root_block: ''
Enterキーでbrを挿入https://gist.github.com/281e26f60c092714b702
1 id: HTML5ForTinyMCE 2 name: HTML5ForTinyMCE 3 version: 1.00 4 5 editors: 6 tinymce: 7 config: 8 schema: html5 9 verify_html: true10 valid_children: ''
HTML5モードhttps://gist.github.com/78cf419f9456612e7d84
1 id: RelativeURLForTinyMCE 2 name: RelativeURLForTinyMCE 3 version: 1.00 4 5 editors: 6 tinymce: 7 config: 8 relative_urls: ~ 9 convert_urls: true10 remove_script_host: true
リンクを相対パスに変換https://gist.github.com/1f234647a582266c5a8b
もう少し本格的にカスタマイズをする
https://github.com/movabletype/Documentation/wiki/Movable-Type-5.2-%E3%81%AE%E3%83%AA
%E3%83%83%E3%83%81%E3%83%86%E3%82%AD
1 id: TableFeatureForTinyMCE2 name: TableFeatureForTinyMCE3 version: 1.024 author_name: Six Apart, Ltd.5 6 editors:7 tinymce:8 extension: extension.tmpl
TableFeatureForTinyMCEhttps://github.com/movabletype/mt-plugin-table-feature-for-tinymce
TableFeatureForTinyMCEhttps://github.com/movabletype/mt-plugin-table-feature-for-tinymce
エディタの変更
CKEditor
CKEditorhttps://github.com/movabletype/mt-plugin-ckeditor
オプションを変更する
テキスト
1 id: MiscSettingsForCKEditor2 name: MiscSettingsForCKEditor3 version: 1.004 5 editors:6 ckeditor:7 config:8 enterMode: 2
Enterキーでbrを挿入https://gist.github.com/2b693224295014d96e3a
CodeMirror
CodeMirrorhttps://github.com/movabletype/mt-plugin-codemirror
オプションを変更する
テキスト
1 id: MiscSettingsForCodeMirror2 name: MiscSettingsForCodeMirror3 version: 1.004 5 editors:6 codemirror:7 config:8 lineNumbers: ~
行番号を表示しないhttps://gist.github.com/dfe6652e982eee34adb8
まとめ
• 新しいリッチテキストエディタ
• 新しいAPI
ご清聴ありがとうございました
