SlideShare une entreprise Scribd logo
1  sur  57
Télécharger pour lire hors ligne
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
ご清聴
ありがとうございました

Contenu connexe

Similaire à 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
 
Webシステムとちょっと便利なツール
Webシステムとちょっと便利なツールWebシステムとちょっと便利なツール
Webシステムとちょっと便利なツールMasashi Shinbara
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn SeminarSix Apart
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Tetsuya Sato
 
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストAngular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェストMasahiko Asai
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御Honma Masashi
 
20141101 handson
20141101 handson20141101 handson
20141101 handsonSix 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
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywordsuupaa
 
pf-1. Python,Google Colaboratory
pf-1. Python,Google Colaboratorypf-1. Python,Google Colaboratory
pf-1. Python,Google Colaboratorykunihikokaneko1
 
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
 

Similaire à 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での制作、いつから始める?
 

Plus de 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
 

Plus de 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
 

Dernier

答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料Jun Chiba
 
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社hmoriyama
 
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdfssuser80a51f
 
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料シンフォニティ 株式会社
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipYasuyoshi Minehisa
 
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)KayaSuetake1
 
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdfストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdfmasakisaito12
 
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチUP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチユニパー株式会社
 
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店ssuserfb441f
 

Dernier (11)

company profile
company profilecompany profile
company profile
 
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
 
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
コダワリ抜いた経営指南書(概要版) - コダワリ・ビジネス・コンサルティング株式会社
 
20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf20240427 zaim academy counseling lesson .pdf
20240427 zaim academy counseling lesson .pdf
 
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
 
KestrelPro Flyer Japan IT Week 2024 (Japanese)
KestrelPro Flyer Japan IT Week 2024 (Japanese)KestrelPro Flyer Japan IT Week 2024 (Japanese)
KestrelPro Flyer Japan IT Week 2024 (Japanese)
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
 
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
 
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdfストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
ストックマーク株式会社がお客様へご提供しているAnews概要資料のご共有.pdf
 
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチUP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
 
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
株式会社MAVEL会社概要_アフィリエイト広告_運用型広告_LTVを予測しLOIを最適化する広告代理店
 

The New Rich Text Editor