The New Rich Text Editor

5,508 views
5,466 views

Published on

Published in: Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,508
On SlideShare
0
From Embeds
0
Number of Embeds
3,423
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The New Rich Text Editor

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

×