SlideShare a Scribd company logo
The New Rich Text Editor
                           2012年8月4日
             Movable Type 開発エンジニア
                                天野卓
リッチテキストエディタ
5.1



5.2
5.1までのエディタ

• 編集機能が少ない
• モダンなHTMLが出力されない
• 生成されるHTMLがブラウザ毎に異なる
• カスタマイズが難しい
5.2のエディタ

• 編集機能が多い
• モダンなHTMLが出力される
• 生成されるHTMLがブラウザ間で同じ
• カスタマイズが簡単
TinyMCE
TinyMCE

• 編集機能が多い
• モダンなHTMLが出力される
• 生成されるHTMLがブラウザ間で同じ
• カスタマイズが簡単
TinyMCE
• ネットブックでも快適に動作する
• 開発が活発である
 • 各ブラウザの最新バージョンへの対応
• 見える形で開発が行われている
 • GitHub で pull request を送信できる
WYSIWYGモード
標準的な編集ボタン
MT由来のボタン
HTMLソースの挿入
HTMLソースの挿入
HTMLソースの挿入
フルスクリーンモード
フルスクリーンモード
投稿設定




編集領域の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_prefs
11       data:
12         content_css: content_css.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: true
10         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: true
10         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: 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
TableFeatureForTinyMCE
https://github.com/movabletype/mt-plugin-table-feature-for-tinymce
エディタの変更
CKEditor
CKEditor
https://github.com/movabletype/mt-plugin-ckeditor
オプションを変更する
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
CodeMirror
CodeMirror
https://github.com/movabletype/mt-plugin-codemirror
オプションを変更する
1   id: MiscSettingsForCodeMirror
2   name: MiscSettingsForCodeMirror
3   version: 1.00
4
5   editors:
6               テキスト
      codemirror:
7       config:
8         lineNumbers: ~


    行番号を表示しない
        https://gist.github.com/dfe6652e982eee34adb8
まとめ


• 新しいリッチテキストエディタ
• 新しいAPI
ご清聴
ありがとうございました

More Related Content

Similar to The New Rich Text Editor

MakeGoodで快適なテスト駆動開発を
MakeGoodで快適なテスト駆動開発をMakeGoodで快適なテスト駆動開発を
MakeGoodで快適なテスト駆動開発をAtsuhiro Kubo
 
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成Osamu Monoe
 
Facebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラーFacebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラー
Garyuten
 
Gitを使った運用方法
Gitを使った運用方法Gitを使った運用方法
Gitを使った運用方法
Hiroki Nigorinuma
 
Webシステムとちょっと便利なツール
Webシステムとちょっと便利なツールWebシステムとちょっと便利なツール
Webシステムとちょっと便利なツールMasashi Shinbara
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
Tetsuya Sato
 
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストAngular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
 
180120 git-nishimoto
180120 git-nishimoto180120 git-nishimoto
180120 git-nishimoto
Takuya Nishimoto
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御
Honma Masashi
 
20141101 handson
20141101 handson20141101 handson
20141101 handson
Six Apart
 
VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011
Hiro Yoshioka
 
今さら聞けない人のためのGitLabの始め方 Ubuntu編
今さら聞けない人のためのGitLabの始め方 Ubuntu編今さら聞けない人のためのGitLabの始め方 Ubuntu編
今さら聞けない人のためのGitLabの始め方 Ubuntu編
VirtualTech Japan Inc./Begi.net Inc.
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
uupaa
 
pf-1. Python,Google Colaboratory
pf-1. Python,Google Colaboratorypf-1. Python,Google Colaboratory
pf-1. Python,Google Colaboratory
kunihikokaneko1
 
Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話
Masayuki Morita
 
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyotoconcrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012KyotoHishikawa Takuro
 
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamThin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamToshiaki Maki
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
 

Similar to The New Rich Text Editor (20)

MakeGoodで快適なテスト駆動開発を
MakeGoodで快適なテスト駆動開発をMakeGoodで快適なテスト駆動開発を
MakeGoodで快適なテスト駆動開発を
 
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
 
Facebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラーFacebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラー
 
Gitを使った運用方法
Gitを使った運用方法Gitを使った運用方法
Gitを使った運用方法
 
20090328
2009032820090328
20090328
 
Webシステムとちょっと便利なツール
Webシステムとちょっと便利なツールWebシステムとちょっと便利なツール
Webシステムとちょっと便利なツール
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
 
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストAngular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
 
180120 git-nishimoto
180120 git-nishimoto180120 git-nishimoto
180120 git-nishimoto
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御
 
20141101 handson
20141101 handson20141101 handson
20141101 handson
 
VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011
 
今さら聞けない人のためのGitLabの始め方 Ubuntu編
今さら聞けない人のためのGitLabの始め方 Ubuntu編今さら聞けない人のためのGitLabの始め方 Ubuntu編
今さら聞けない人のためのGitLabの始め方 Ubuntu編
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
 
pf-1. Python,Google Colaboratory
pf-1. Python,Google Colaboratorypf-1. Python,Google Colaboratory
pf-1. Python,Google Colaboratory
 
Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話
 
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyotoconcrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
 
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamThin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikam
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 

More from Taku AMANO

未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法
未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法
未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法
Taku AMANO
 
File API: Writer & Directories and System
File API: Writer & Directories and SystemFile API: Writer & Directories and System
File API: Writer & Directories and SystemTaku AMANO
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
Movable Type in the cloud
Movable Type in the cloudMovable Type in the cloud
Movable Type in the cloudTaku AMANO
 
About NSEG Vol.5
About NSEG Vol.5About NSEG Vol.5
About NSEG Vol.5Taku AMANO
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 
Self Introduction 20100211
Self Introduction 20100211Self Introduction 20100211
Self Introduction 20100211Taku AMANO
 
MT LT 20100205
MT LT 20100205MT LT 20100205
MT LT 20100205Taku AMANO
 
MT LT 20091209
MT LT 20091209MT LT 20091209
MT LT 20091209Taku AMANO
 

More from Taku AMANO (11)

未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法
未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法
未設定のドメインでも ELB 経由で proxy.pac を使って https で接続する方法
 
File API: Writer & Directories and System
File API: Writer & Directories and SystemFile API: Writer & Directories and System
File API: Writer & Directories and System
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
Movable Type in the cloud
Movable Type in the cloudMovable Type in the cloud
Movable Type in the cloud
 
Git 20100724
Git 20100724Git 20100724
Git 20100724
 
About NSEG Vol.5
About NSEG Vol.5About NSEG Vol.5
About NSEG Vol.5
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
Git 20100313
Git 20100313Git 20100313
Git 20100313
 
Self Introduction 20100211
Self Introduction 20100211Self Introduction 20100211
Self Introduction 20100211
 
MT LT 20100205
MT LT 20100205MT LT 20100205
MT LT 20100205
 
MT LT 20091209
MT LT 20091209MT LT 20091209
MT LT 20091209
 

Recently uploaded

【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
ytakahashi4
 
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
Members_corp
 
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL HoldingsThe AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
mikidaisuke
 
研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案
研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案
研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案
ssuser4eac57
 
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
recruit9
 
kintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdfkintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdf
takashihashimoto14
 
intra-mart Accel series 2024 Spring updates
intra-mart Accel series 2024 Spring updatesintra-mart Accel series 2024 Spring updates
intra-mart Accel series 2024 Spring updates
NTTDATA INTRAMART
 
【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer
yutooyama
 
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
DAISUKE NAKAMURA
 
HRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreachHRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreach
gmiki1
 
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
ssuserdc1268
 

Recently uploaded (11)

【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
【株式会社ゆめみ】 会社紹介 & 実績資料 ≫≫Saleshub_企業様向け≪≪
 
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
株式会社メンバーズ社内報MEMBUZZ(メンバズ)2024年4・5月合併号(♯168,169)
 
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL HoldingsThe AI service "MMOL Pot (MMOT)" by MMOL Holdings
The AI service "MMOL Pot (MMOT)" by MMOL Holdings
 
研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案
研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案
研究エンパワープラットフォームを提供するLabBaseから理系採用成功に向けたご提案
 
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
【公開用】株式会社VISIONARY JAPAN_エンジニアチーム 採用資料(ver2.1)
 
kintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdfkintone Café 山口 Vol.8 kintone×UiPath.pdf
kintone Café 山口 Vol.8 kintone×UiPath.pdf
 
intra-mart Accel series 2024 Spring updates
intra-mart Accel series 2024 Spring updatesintra-mart Accel series 2024 Spring updates
intra-mart Accel series 2024 Spring updates
 
【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer【スポンサープラン】Marketing Native Fes 2024summer
【スポンサープラン】Marketing Native Fes 2024summer
 
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
株式会社ジンザイベース/特定技能外国人紹介に関する提案資料/2024ver///
 
HRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreachHRMOS-saiyo_overview_material_powred_by_bizreach
HRMOS-saiyo_overview_material_powred_by_bizreach
 
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
株式会社ROMS採用候補者用説明資料。候補者の方向け事業概要・沿革・カルチャーをご紹介
 

The New Rich Text Editor