エントリー

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. すると画面の文章にネタバレ文の枠が入ります。
    ネタバレ文の入力完了

ページ移動

関連エントリー

コメント

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

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