人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: gdwtseq
●カテゴリ:ウェブ制作
✍キーワード:CMS JavaScript Plone webサイト wordpress
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●300ポイント ベストアンサー

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

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

もし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などゴリゴリする必要があります。


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

◎質問者からの返答

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

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

挿入された<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...


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


2 ● mirakurutoshiki
●0ポイント

http://www.mizontz.com/wp5/?p=16210

これはどうですか

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ