TinyMCE 画像のキャプションを自動付加について

wordpressゃplone のCMSにTinyMCEプラグインがあり、その機能には画像のタグ挿入と同時に画像キャプションも画像下に付加できるようですが。

CMSを使わず TinyMCE単独で画像キャプションを付加するカスタマイズは可能でしょうか?
当方javascriptのスキルは中級に行かない程度です。
既存のWebサイトで TinyMCEを使った機能追加をしよとしておりますが、CMSを使わず作られているのです。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2011/08/13 18:20:04
  • 終了:2011/08/18 12:16:33

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/08/13 23:10:40

ポイント300pt

>画像キャプションを付加するカスタマイズ

がどういう動作を指しているのかはっきりしないのでアレですが、

もしlightboxやhighslideのような、画像をクリックするとポップアップで表示され下にキャプションが付くような効果のことを指しているなら、リンク設定のadvancedでlightboxを付ければできると思います。

Vectis Solutions » Using Lightbox with TinyMCE - help


TinyMCEのadvancedにlightboxがプリセットされているものの、lightbox本体のスクリプトは同梱されていないようなので、

のようにしてlightboxを読み込むようにしてから、

Vectis Solutions » Using Lightbox with TinyMCE - help


要は、lightbox読み込み時にaタグにrel="lightbox"があればlightbox化するので、TinyMCEでそれを付けるようにするだけです。


----------

追記:

簡単なプラグインを作ってみました。

https://github.com/cherenkov/tinymce-caption-plugin

上のDownloadボタンからzipを落としてexamplesフォルダのfull.htmlを開いてみてください。

メニューボタンの一番最後にあるのがキャプション用です。

このプラグインは画像のalt属性をspanで出力するだけなので、

まずは備え付けのinsert imageでdescriptionを設定して画像を挿入して、

画像を選択してこのプラグインを実行するといった手順です。

一回の動作で、画像挿入、キャプション設定をするには、window用htmlなどゴリゴリする必要があります。


が参考になると思います。

id:gdwtseq

回答ありがとうございます。

しかし、ポップアップは想定していません。

挿入された<img>タグの下に<br /><span>画像の説明</span>

が同時に挿入されるイメージです。

wordpress や plone のプラグインでは、alt属性に設定されたテキストをキャプションに使っている様です。

文章の回り込みまで対応しているようです。

参考にしたサイト:

http://fridgedesign.net/wordpress-image-upload/

TinyMCEを簡単にカスタマイズする方法はありますか?

ゴリゴリ改造しなければならないようになるのでしょうか?

---

追記ありがとうございます。

full.html を見させていただきました。

この手順は十分受け入れられるものだと思います。

参考URLもありがとうございます。

理想は、タグを

で囲って、class属性に CSSのフロートを適用できるようにしたです。

wordpress のhtmlソースを見たら、そうなっていました。

<div id="attachment_7" class="wp-caption alignleft" style="width: 310px"><a...<img...


また何かありましたら、ご投稿いただけると幸いです。

2011/08/16 15:48:12

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922011/08/13 23:10:40ここでベストアンサー

ポイント300pt

>画像キャプションを付加するカスタマイズ

がどういう動作を指しているのかはっきりしないのでアレですが、

もしlightboxやhighslideのような、画像をクリックするとポップアップで表示され下にキャプションが付くような効果のことを指しているなら、リンク設定のadvancedでlightboxを付ければできると思います。

Vectis Solutions » Using Lightbox with TinyMCE - help


TinyMCEのadvancedにlightboxがプリセットされているものの、lightbox本体のスクリプトは同梱されていないようなので、

のようにしてlightboxを読み込むようにしてから、

Vectis Solutions » Using Lightbox with TinyMCE - help


要は、lightbox読み込み時にaタグにrel="lightbox"があればlightbox化するので、TinyMCEでそれを付けるようにするだけです。


----------

追記:

簡単なプラグインを作ってみました。

https://github.com/cherenkov/tinymce-caption-plugin

上のDownloadボタンからzipを落としてexamplesフォルダのfull.htmlを開いてみてください。

メニューボタンの一番最後にあるのがキャプション用です。

このプラグインは画像のalt属性をspanで出力するだけなので、

まずは備え付けのinsert imageでdescriptionを設定して画像を挿入して、

画像を選択してこのプラグインを実行するといった手順です。

一回の動作で、画像挿入、キャプション設定をするには、window用htmlなどゴリゴリする必要があります。


が参考になると思います。

id:gdwtseq

回答ありがとうございます。

しかし、ポップアップは想定していません。

挿入された<img>タグの下に<br /><span>画像の説明</span>

が同時に挿入されるイメージです。

wordpress や plone のプラグインでは、alt属性に設定されたテキストをキャプションに使っている様です。

文章の回り込みまで対応しているようです。

参考にしたサイト:

http://fridgedesign.net/wordpress-image-upload/

TinyMCEを簡単にカスタマイズする方法はありますか?

ゴリゴリ改造しなければならないようになるのでしょうか?

---

追記ありがとうございます。

full.html を見させていただきました。

この手順は十分受け入れられるものだと思います。

参考URLもありがとうございます。

理想は、タグを

で囲って、class属性に CSSのフロートを適用できるようにしたです。

wordpress のhtmlソースを見たら、そうなっていました。

<div id="attachment_7" class="wp-caption alignleft" style="width: 310px"><a...<img...


また何かありましたら、ご投稿いただけると幸いです。

2011/08/16 15:48:12

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません