ユーティリティ

2017年06月

- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoのTinyMCEにネタバレボタンを追加する方法

  • 2012/08/29 15:52
  • カテゴリー:TinyMCE3

freoには追加機能として ネタバレボタンの実装 があります。
ネタバレボタンを実装した感じ ⇒ こちら

しかし、ボタンを追加するのにその都度

<div class="hidearea">
<p>ここがネタバレ領域です。</p>
</div>

とHTML編集モードに切り替えて打ち込む必要があるので面倒くさいです。
もっとも作者のないとさんは

TinyMCEやmarkItUp!のツールバーから簡単にネタバレボタンを作成…は、いつか解説を用意したいと思います。

とおっしゃってますが、いつになるのかわからないので(^^ゞここで付け方を紹介しておきます(ただないとさんのやり方は別の方法なのかもしれません)。

TinyMCEの編集

js/admin.js(管理画面用のjsファイル)で130行目あたりの

	theme_advanced_buttons1: 'bold,strikethrough,|,bullist,numlist,|,table,|,formatselect,|,visualaid,visualblocks,code,fullscreen,help',

の部分を

	theme_advanced_buttons1: 'bold,strikethrough,|,bullist,numlist,|,table,|,formatselect,styleselect,|,visualaid,visualblocks,code,fullscreen,help',

に変更(赤字を追加)して、その上の行に

	style_formats : [
		{title : 'ネタバレ', block : 'div', classes : 'hidearea' },
		{title : 'ネタバレ改行', inline : 'p' }
	],

を追加します。

するとTinyMCEの表示が以下のようになります(もしならないようなら一度ブラウザのキャッシュをクリアしてから更新してみてください)。
ファイル 52-1.jpg

実際にネタバレボタンを使うには

ネタバレボタンを表示させたい部分にカーソルを合わせたら、上の「ネタバレ改行」(「スタイル」と表示されている場合もあり)の横にある▼をクリックするとセレクトボックスから「ネタバレ」が表示されるのでそれをクリックします。
ファイル 52-2.jpg

するとネタバレ領域の部分(グレーのボックス)が表示されます。
ファイル 52-3.jpg

グレーのボックス内にネタバレの内容を入力するのですが、ここでEnterを押して改行(<p>改行)すると、グレーのボックスが2つになってしまいます(Shift+Enter(<br>改行)は問題なくできます)。
ファイル 52-4.jpg

これではネタバレが2つになってしまいます。そこで改行する前にあらかじめ続きの文章を少し入力し、その部分をドラックします。
ファイル 52-5.jpg

先ほどのセレクトボックスから「ネタバレ改行」を選択して
ファイル 52-6.jpg

クリックすると
ファイル 52-7.jpg

グレーのボックス内に改行されます。それから続きの文章を入力してください。
次からは普通にEnterを押してもちゃんと改行されます。

改行についてもっと他にいい方法があるのかもしれません。ご存知でしたら教えて下さいm(__)m

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)