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

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

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

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

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

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

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

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

【2017/09/26】TinyMCE4用ネタバレ入力プラグインを公開しました。

freoではver1.20.0よりTinyMCE4が同梱されましたので、以下の記事は参考でご覧ください。

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

日	月	火	水	木	金	土
-	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	-	-	-	-

freoカスタマイズ集