SlideShare una empresa de Scribd logo
1 de 57
Descargar para leer sin conexión
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
ご清聴
ありがとうございました

Más contenido relacionado

Similar a 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
 
Webシステムとちょっと便利なツール
Webシステムとちょっと便利なツールWebシステムとちょっと便利なツール
Webシステムとちょっと便利なツール
Masashi Shinbara
 
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyotoconcrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
concrete5 最新バージョンと国内コミュニティ活動の紹介 OSC2012Kyoto
Hishikawa Takuro
 
Thin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikamThin Server Architectureでブログ作った #ikam
Thin Server Architectureでブログ作った #ikam
Toshiaki Maki
 

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

Más de Taku AMANO

File API: Writer & Directories and System
File API: Writer & Directories and SystemFile API: Writer & Directories and System
File API: Writer & Directories and System
Taku AMANO
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
Taku AMANO
 
Movable Type in the cloud
Movable Type in the cloudMovable Type in the cloud
Movable Type in the cloud
Taku AMANO
 
About NSEG Vol.5
About NSEG Vol.5About NSEG Vol.5
About NSEG Vol.5
Taku AMANO
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
Taku AMANO
 
Self Introduction 20100211
Self Introduction 20100211Self Introduction 20100211
Self Introduction 20100211
Taku AMANO
 
MT LT 20100205
MT LT 20100205MT LT 20100205
MT LT 20100205
Taku AMANO
 
MT LT 20091209
MT LT 20091209MT LT 20091209
MT LT 20091209
Taku AMANO
 

Más 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
 

Último

物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
Michael Rada
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
Yasuyoshi Minehisa
 

Último (8)

ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdfストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
ストックマーク株式会社がご提供しているAnews(エーニュース)概要紹介.pdf
 
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
シンフォニティ株式会社(SYMPHONITY , Inc.) 会社説明・人材採用資料
 
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
物流は成長の準備ができていますか? 警告 1 日あたり 1 章を超えて消費しないでください コンテンツが覚醒と変化への意志を引き起こす
 
Service-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadershipService-introduction-materials-misorae-leadership
Service-introduction-materials-misorae-leadership
 
事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)事例DBサービス紹介資料(Case Study DB service introduction)
事例DBサービス紹介資料(Case Study DB service introduction)
 
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
202405_VISIONARYJAPAN_engineerteam_entrancebook(ver2.1)
 
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
 
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチUP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
UP103シリーズ パワーコメット ユニパー スライドレールタイプ 瓦揚げ機 ウインチ
 

The New Rich Text Editor