the new rich text editor
TRANSCRIPT
![Page 1: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/1.jpg)
The New Rich Text Editor2012年8月4日
Movable Type 開発エンジニア天野卓
![Page 2: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/2.jpg)
リッチテキストエディタ
![Page 3: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/3.jpg)
![Page 4: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/4.jpg)
![Page 5: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/5.jpg)
5.1
5.2
![Page 6: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/6.jpg)
• 編集機能が少ない
• モダンなHTMLが出力されない
• 生成されるHTMLがブラウザ毎に異なる
• カスタマイズが難しい
5.1までのエディタ
![Page 7: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/7.jpg)
• 編集機能が多い
• モダンなHTMLが出力される
• 生成されるHTMLがブラウザ間で同じ
• カスタマイズが簡単
5.2のエディタ
![Page 8: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/8.jpg)
TinyMCE
![Page 9: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/9.jpg)
• 編集機能が多い
• モダンなHTMLが出力される
• 生成されるHTMLがブラウザ間で同じ
• カスタマイズが簡単
TinyMCE
![Page 10: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/10.jpg)
• ネットブックでも快適に動作する
• 開発が活発である
• 各ブラウザの最新バージョンへの対応
• 見える形で開発が行われている
• GitHub で pull request を送信できる
TinyMCE
![Page 11: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/11.jpg)
![Page 12: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/12.jpg)
WYSIWYGモード
![Page 13: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/13.jpg)
標準的な編集ボタン
![Page 14: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/14.jpg)
MT由来のボタン
![Page 15: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/15.jpg)
HTMLソースの挿入
![Page 16: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/16.jpg)
HTMLソースの挿入
![Page 17: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/17.jpg)
HTMLソースの挿入
![Page 18: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/18.jpg)
フルスクリーンモード
![Page 19: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/19.jpg)
フルスクリーンモード
![Page 20: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/20.jpg)
編集領域のCSS
投稿設定
![Page 21: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/21.jpg)
編集領域のCSS
![Page 22: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/22.jpg)
編集領域のCSS
1 body.wysiwyg {2 background: pink;3 }
![Page 23: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/23.jpg)
編集領域のCSS
1 body.entry {2 background: pink;3 }4 5 body.page {6 background: pink;7 }
![Page 24: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/24.jpg)
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
![Page 25: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/25.jpg)
ソース編集モード
![Page 26: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/26.jpg)
MT由来のボタン
![Page 27: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/27.jpg)
フルスクリーンモード
![Page 28: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/28.jpg)
標準的な編集ボタン
![Page 29: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/29.jpg)
標準的な編集ボタン
![Page 30: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/30.jpg)
出力されるHTMLに関する設定
![Page 31: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/31.jpg)
HTMLに関する設定• HTML4と5のどちらの要素も利用できる
• 要素のチェックは基本的には行わない
• 親子関係のチェックは行う
• 属性値のチェックは行わない
• HTMLの出力を整形する
![Page 32: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/32.jpg)
5.1以前のデータとの互換性
![Page 33: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/33.jpg)
5.1までのエディタ• HTML4と5のどちらの要素も利用できる
• 要素のチェックは基本的には行わない
• 親子関係のチェックは行わない
• 属性値のチェックは行わない
• HTMLの出力を整形しない
![Page 34: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/34.jpg)
5.2のエディタ• HTML4と5のどちらの要素も利用できる
• 要素のチェックは基本的には行わない
• 親子関係のチェックは行う
• 属性値のチェックは行わない
• HTMLの出力を整形する
![Page 35: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/35.jpg)
API
![Page 36: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/36.jpg)
5.1までのAPI
• カスタマイズ方法が用意されていない
• エディタを変更することができる
• 実装するのが非常に難しい
![Page 37: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/37.jpg)
5.2のAPI
• カスタマイズ方法が用意されている
• エディタを変更することができる
• 実装するのが簡単
![Page 38: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/38.jpg)
TinyMCEのカスタマイズ
![Page 39: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/39.jpg)
オプションを変更する
![Page 40: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/40.jpg)
http://www.tinymce.com/wiki.php/Configuration
![Page 41: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/41.jpg)
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
![Page 42: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/42.jpg)
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
![Page 43: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/43.jpg)
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
![Page 44: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/44.jpg)
もう少し本格的にカスタマイズをする
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
![Page 45: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/45.jpg)
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
![Page 46: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/46.jpg)
TableFeatureForTinyMCEhttps://github.com/movabletype/mt-plugin-table-feature-for-tinymce
![Page 47: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/47.jpg)
エディタの変更
![Page 48: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/48.jpg)
CKEditor
![Page 49: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/49.jpg)
CKEditorhttps://github.com/movabletype/mt-plugin-ckeditor
![Page 50: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/50.jpg)
オプションを変更する
![Page 51: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/51.jpg)
テキスト
1 id: MiscSettingsForCKEditor2 name: MiscSettingsForCKEditor3 version: 1.004 5 editors:6 ckeditor:7 config:8 enterMode: 2
Enterキーでbrを挿入https://gist.github.com/2b693224295014d96e3a
![Page 52: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/52.jpg)
CodeMirror
![Page 53: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/53.jpg)
CodeMirrorhttps://github.com/movabletype/mt-plugin-codemirror
![Page 54: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/54.jpg)
オプションを変更する
![Page 55: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/55.jpg)
テキスト
1 id: MiscSettingsForCodeMirror2 name: MiscSettingsForCodeMirror3 version: 1.004 5 editors:6 codemirror:7 config:8 lineNumbers: ~
行番号を表示しないhttps://gist.github.com/dfe6652e982eee34adb8
![Page 56: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/56.jpg)
まとめ
• 新しいリッチテキストエディタ
• 新しいAPI
![Page 57: The New Rich Text Editor](https://reader034.vdocuments.mx/reader034/viewer/2022050707/557ad491d8b42a200f8b5346/html5/thumbnails/57.jpg)
ご清聴ありがとうございました