The New Rich Text Editor

The New Rich Text Editor

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