タグ「TinyMCE」が付けられているもの

TinyMCE フォントサイズ指定

TinyMCE2.0.8の日本語書体追加等の修正済差替ファイルが公開されている。しかし、ダウンロード数(2007年1月15日現在)はTinyMCE-for-mtの 1306に比べ、54と少数である。

アクセシビリティを考える上ではフォントサイズを固定しないことは必須であるため、%での指定が出来るこの機能はぜひ組み込みたい。
*デフォルトテンプレートをご使用の場合、ピクセルでのフォントサイズ指定が行われています。Internet Explorer 6での文字の大きさが変更できない為、StyleCatcherで可変文字サイズのスタイルシートに変更することをお勧めします。

この修正はTinyMCE2.0.8の本体を独自にコアハックをおこなったもので、修正済ファイルを既存ファイルと差し替えることにより、W3C勧告に準拠した正しいXHTML表現とアクセシビリティを高め、ブログやWebの表現力を高めることができる。

TinyMCE Japanリリースファイル・リストからtiny_mce.zipを選らんでダウンロード解凍して、既存の同名ファイルと差し替えるだけで完了。

TinyMCE Japan よりtiny_mce.zipをダウンロード。

ダウンロードしたファイルを解凍するとできる「tiny_mce」ディレクトリ中の 中身をMovableTypeがインストールされているディレクトリ中の同じ名前のディレクトリにアップロードする。

tiny_mce
  └tiny_mce.js
  └tiny_mce_src.js
  └themes
     └advanced
        └editor_template.js
        └editor_template_src.js

まず、mt-static/TinyMCEforMT/js/tiny_mceディレクトリへ以下の2つのファイルをアップロードする

  • tiny_mce.js
  • tiny_mce_src.js

更にmt-static/TinyMCEforMT/js/tiny_mce/themes/advancedディレクトリへ以下の2つのファイルをアップロードする

  • editor_template.js
  • editor_template_src.js

完了したエントリー画面

書体指定

文字サイズ指定

注意:必ず今日の開発:TinyMCE書体関係のハック公開および、TinyMCE2.08用日本語書体追加等のハック済み差替ファイル公開を確認し作業を行ってください。

iBrowser Ex

TinyMCE Plugin for Movable Type1.20Jaに付属されたiBrowser Exを使ってみた。

3.パーミッション設定

同梱のibrowserディレクトリ及びその子ディレクトリのパーミッションを777等に変更します。
※各サーバの設定に詳細は依存します。

ibrowserフォルダごとアプリケーション・ディレクトリへアップしてibrowserディレクトリとその中のディレクトリのlibraryとuploadsをパーミッションを777等に変更します。

画像ディレクトリの設定を変更してみた。

オリジナルの画像ディレクトリの設定

$tinyMCE_imglibs = array(
array (
text => 'My Upload',
value => '../../../../../../ibrowser/uploads',
url => 'ibrowser/upload/',
create_dir => true,
upload => true,
delete => true
),
array (
text => 'Main Library',
value => '../../../../../../ibrowser/library',
url => 'ibrowser/library/',
create_dir => false,
upload => false,
delete => false
)
);

変更した画像ディレクトリの設定

$tinyMCE_imglibs = array(
array (
text => 'My Upload',
value => '../../../../../../ibrowser/uploads',
url => '/blog/ibrowser/uploads',
create_dir => false,
upload => true,
delete => true
 ),
array (
text => 'Main Library',
value => '../../../../../../ibrowser/library',
url => '/blog/ibrowser/library',
create_dir => false,
upload => false,
delete => false
)
);

後は簡単!画像の挿入/編集ボタンをクリックすると新しい画面が開く。

2.使い方

・My Upload

このディレクトリに対してはブラウザからその時点で画像をアップロードする場合に用います。 基本設定では削除が許可されています。
※ディレクトリを作成することも可能ですが、サーバ設定やパーミッションの問題で作成したディレクトリに対して、画像のアップロードが出来ないケースもありますのでご注意ください。

・My Library

このディレクトリは予めftpなどで大量の画像を一度にアップロードしておき、利用する場合に用います。
ディレクトリの作成と画像アップロード、画像削除を不許可設定としています。
※設定変更でディレクトリの作成、画像アップロード、画像削除を許可する事もできますが、サーバ設定やパーミッションの問題で作成したディレクトリに対して、画像のアップロードが出来ないケースもありますのでご注意ください。

画面下の画像アップロードを利用して、ローカルの画像を選択、ライブラリに追加された画像を選択すると以下のように画像が表示される。

iBrowser

説明に画像の代替テキストを挿入し保存する。*枠線・縦空き・横空きはスタイルシートで調整することをお勧めします。

デフォルトでの画像のアップロードを利用するよりも簡単に画像ディレクトリを特定したアップロードが行えます。

TinyMCE for Nucleus CMS

今日の開発:TinyMCE for Nucleus CMS公開

SourceForge.jpで立ち上げたオープンソースプロジェクトである『TinyMCE Japan』の活動第2弾として、Movable Type版に先行して、NucleusCMS日本語版用TinyMCEを公開した。

使い方は至って簡単。MovableTypeとほぼ同じである。

WYSIWYGモード

書き出すソースは多少無視される要素や属性もありますが、XHTML 1.0にほぼ準拠

ソースを編集

デフォルトでの表示

デフォルトでの表示

自由度が高いNucleusと組み合わせると最強のCMSとなるだろう。

TinyMCE Plugin for Movable Type1.20Jaも出たんでした...

TinyMCE Plugin for Movable Type Ver1.10

9月28日 TinyMCE Plugin for Movable Type Ver1.10 Jaが公開され、すでに多くの方が利用されていると思いますが、TinyMCEには無視される要素・属性があります。
(これは日本語化の際のバグではなく、TinyMCE自体の仕様です。)

TinyMCE Plugin for Movable Type Ver1.10 Jaを使用する上での参考になればと思いエントリーいたします。

【無視される要素および属性】

  • q要素
  • cite要素
  • code要素
  • blockquote要素のcite属性
  • blockquote要素のlang属性
  • blockquote要素のxml:lang

たとえばこんなエントリーを記述したとする。(10月4日のエントリー)

<p><cite><a href="http://www.seo-equation.com/www/cat24/abbr_acronym_difference.html">abbr要素と acronym要素の違い<img src="/webimg/link.gif" alt="外部へのリンク" width="15" height="9" /></a></cite></p>
<blockquote cite="http://www.seo-equation.com/www/cat24/abbr_acronym_difference.html"><p>現在、草案段階のXML技術による次世代HTML である XHTML2.0 において、実は acronym要素は廃止される予定です。</p></blockquote>
<blockquote cite="http://www.seo-equation.com/www/cat24/abbr_acronym_difference.html"><p>最新版の Win版Internet Explorer 7 より、abbr要素に対応することになったことで、ようやく abbr要素・acronym要素闘争問題にも終止符が打たれることとなりました。結論としては、本文書では主に abbr要素と acronym要素の両要素の違いについてみてきましたが、実は両要素を使い分けるというのは無駄なことでしかなく、略語はすべて abbr要素に統一しなさいということになるのでしょう。</p></blockquote>
<p>IE7の対応についてはまったく確認していなかった。</p>
<p>早速確認。他のモダンブラウザのように下部に点線ボーダーが出ないので、カーソルを合わせてみないとabbrを使っていることが一切解からない。</p>
<pre><code>abbr {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #666;
}</code></pre>
<p>またも、IE7用の対応が必要です...</p>

TinyMCE Plugin for Movable TypeのWYSIWYGモードで開いて【ソースを編集】ボタンを押して開いてみると以下のようになっている。

<p>
<a href="http://www.seo-equation.com/www/cat24/abbr_acronym_difference.html">abbr要素と acronym要素の違い
<img width="15" height="9" alt="外部へのリンク" src="/webimg/link.gif" />
</a>
</p>
<blockquote>
<p>
現在、草案段階のXML技術による次世代HTML である XHTML2.0 において、実は acronym要素は廃止される予定です。
</p>
</blockquote>
<blockquote>
<p>
最新版の Win版Internet Explorer 7 より、abbr要素に対応することになったことで、ようやく abbr要素・acronym要素闘争問題にも終止符が打たれることとなりました。結論としては、本文書では主に abbr要素と acronym要素の両要素の違いについてみてきましたが、実は両要素を使い分けるというのは無駄なことでしかなく、略語はすべて abbr要素に統一しなさいということになるのでしょう。
</p>
</blockquote>
<p>
IE7の対応についてはまったく確認していなかった。
</p>
<p>
早速確認。他のモダンブラウザのように下部に点線ボーダーが出ないので、カーソルを合わせてみないとabbrを使っていることが一切解からない。
</p>
<pre>
abbr {<br />
border-bottom-width: 1px;<br />
border-bottom-style: dotted;<br />
border-bottom-color: #666;<br />
}
</pre>
<p>
またも、IE7用の対応が必要です&hellip;
</p>

冒頭の【無視される要素および属性】だけではなく、pre要素の空白文字も無視されています。

SourceForge.jpの TinyMCE for Movable Type開発プロジェクトのフォーラムにもアップしていますが、これを回避するには以下の方法を試してください。

  1. WYSIWYG画面で編集、blockquoteppreなどを記述
  2. 一旦通常画面に戻る
  3. 通常画面上で編集、citecode・空白文字などを挿入し、その後WYSIWYG画面には戻らない

その他(リストのネストが出来ない等)の無視される要素・属性もあるようですが...

address要素

先日、TinyMCE Plugin for Movable Type Ver1.00 Jaの開発プロジェクトサイトを構築されるとの事で有限会社ITプロフェッショナル蒲生(Dakiny)さんと電話の最中、address要素の話となった。

address要素は問合せ先等の情報を示す際に用る。制作者の情報を記述する際にも良く用いられ、作成日、更新日、メールアドレス等記述する。address要素はブロックレベル要素で中身はインライン要素に限られる。

上記程度の知識なので、うまく説明できなかった。気になる...

Web標準の教科書

これまでのWebページ制作においても、かなり限定的ではあるがメタデータが利用されてきた。たとえば(X)HTMLのmeta要素(p.48)でその文書のキーワード、制作者などを示す、link要素(p.53)で他の文書との関係を示す、address要素(p.59)で作成者情報を示す、xml:lang属性で自然言語を示すといったことは、まさにその文書に関するメタデータの記述例である。

こんなに近くに答えがあった。

TinyMCE Plugin for Movable Type Ja

(有)ITプロフェッショナルさんのTinyMCE Plugin for Movable Type Ja プラグインを入れてみた。
ボタンがたくさん付いて、エントリー画面がこんなに賑やか!

TinyMCE Plugin for Movable Type Ja

WYSIWYGエディタはWindows98時代のIE5.5のおまけソフトFrontPage Express位しか弄った事が無いので、「どうか?」と聞かれてみても・・・ うんうん、確かに、ボタンだけで簡単に編集できる。

Wordと同じような感覚で編集が出来そうです。「字下げ」はblockquoteなのか・・・どうしてもソースを見ないと気がすまない性格は、しょうがないですね。