The New Rich Text Editor

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

ご清聴ありがとうございました