エントリー

TinyMCE4用rubyタグ入力プラグイン

以前、freoのTinyMCEにrubyタグ入力プラグインを導入する で紹介したrubyプラグインをTinyMCE4で使用する方法を TinyMCE4でTinyMCE3.xのプラグインを使用する で紹介しましたが、今回一からプラグインを作成し直してみました。

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

  • こちら からプラグインをダウンロードできます。
  • ファイル構成
    ruby
     ┣ imgruby.png
    langsen.js
    ┃ ┗ ja.js
    plugin.js
    plugin.min.js
TinyMCE4をサーバにアップして使用している場合
  1. ダウンロードしたファイルを解凍して ruby フォルダを 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 ruby' ], toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ruby', ~(略)~
    赤字部分を追加します。
TinyMCE4をサーバにアップせずCDNで使用している場合
  1. ダウンロードしたファイルを解凍して ruby フォルダを 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: {
    "ruby": freo_path + "js/tinymce/plugins/ruby/plugin.min.js",
    },

    ~(略)~
    toolbar2: "forecolor backcolor removeformat | link unlink image media charmap pagebreak | searchreplace | ruby undo redo |",
    ~(略)~
    赤字部分を追加します。
  3. 導入するとTinyMCEに「ルビ」ボタンが表示されます。
    rubyプラグインを導入したところ

※ruby入力の方法

  1. 「ルビ」ボタンを押すと、「ルビの挿入」ダイヤログが表示されます。ルビを入れたい文字を選択してから「ルビ」ボタンを押しても操作可能です。
    98-2.jpg
  2. 「親文字」の欄にはルビを振りたい文字、「ルビ」の欄にふりがなを入力して「OK」ボタンを押します。
    98-3.jpg
  3. すると画面の文章にルビが振られます。
    ルビを登録したところ
  4. 【注意】一旦ルビが挿入された親文字を選択して、「ルビ」ボタンを押してもルビの編集はできませんので、ご了承下さい。
    ルビを編集する場合は、恐れ入りますがTinyMCEの画面で行って下さい。

 

※ルビタグ変換プラグイン用バージョン【2017/09/26追加】

龍の棲む場所さんで配布しているルビタグ変換プラグイン用の入力プラグインもご用意しましたので、こちらからダウンロードしてください。

設置・使用方法は上記と同じですが、入力して「OK」ボタンを押すと、下記のような画面になります。

ルビタグ変換プラグインによる入力

 

ページ移動

関連エントリー

コメント

cmsimple-jp

CDNのcompat3xは、ほぼ無いですし、自鯖に置こうにも、結構バージョンがシビアで...と、
compat3x利用のyomiganaを含めてTinyMCE3系をどうしたもんじゃろ? と考えてました。
利用させて頂きます!

compat3x不要のClearボタンです
元はWordpressのです
https://github.com/bbfriend/Clear-Floats-Button

  • URL
  • 2017/12/06 06:19:46

コメント登録

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

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

ユーティリティ

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