freoカスタマイズ集

以前、freoのTinyMCEにネタバレボタンを追加する方法 を紹介しましたが、TinyMCE4が標準装備されたのを機にプラグインを作成してみました。

※netabareプラグイン導入の方法

• こちら からプラグインをダウンロードできます。
• ファイル構成

  netabare
   ┣ img ━ netabare.png
   ┣ langs ┳ en.js
   ┃       ┗ ja.js
   ┣ plugin.js
   ┗ plugin.min.js

TinyMCE4をサーバにアップして使用している場合

1. ダウンロードしたファイルを解凍して netabare フォルダを tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE」以降の部分に、
   

   //TinyMCE
   tinymce.init({
   ～（略）～
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table contextmenu paste code netabare'
     ],
     toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image netabare',
   ～（略）～

   赤字部分を追加します。

TinyMCE4をサーバにアップせずCDNで使用している場合

1. ダウンロードしたファイルを解凍して netabare フォルダを js/tinymce/plugins/ ディレクトリにアップします。
2. js/admin.js の「//TinyMCE4」以降の部分に、
   

   //TinyMCE4
   tinymce.init({
   ～（略）～
     plugins: [
       'advlist autolink lists link image charmap print preview anchor',
       'searchreplace visualblocks code fullscreen',
       'insertdatetime media table contextmenu paste code pagebreak fullpage'
     ],
      plugins: "advlist image link autosave contextmenu fullscreen pagebreak searchreplace table lists charmap code media textcolor",
     external_plugins: {
       "netabare": freo_path + "js/tinymce/plugins/netabare/plugin.min.js",
     },
   ～（略）～
      toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | netabare undo redo |",
   ～（略）～

   赤字部分を追加します。
3. 導入するとTinyMCEに「ネタバレ」ボタンが表示されます。
   

※ネタバレ文の入力方法

1. 「ネタバレ」ボタンを押すと、「ネタバレ文の挿入」ダイヤログが表示されます。ネタバレにしたい文章を選択してから「ネタバレ」ボタンを押しても操作可能です。
   
2. 「ネタバレボタンのタイトル」の欄（任意）、「ネタバレ文章」の欄を入力して「OK」ボタンを押します。
   
3. すると画面の文章にネタバレ文の枠が入ります。