ユーティリティ

2017年10月

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 31 - - - -

キーワード検索

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

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

TinyMCE4用ネタバレ入力プラグイン

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

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

  • こちら からプラグインをダウンロードできます。
  • ファイル構成
    netabare
     ┣ imgnetabare.png
    langsen.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. すると画面の文章にネタバレ文の枠が入ります。
    ネタバレ文の入力完了

ページ移動

関連エントリー

コメント

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

コメント登録

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