Help us understand the problem. What is going on with this article?

Tinymce初期化後にボタンを有効化・無効化する

More than 1 year has passed since last update.

はじめに

Tinymce(バージョン4)初期化後に外部からの操作でボタンの有効・無効切り替えしようと思ったのだけど、なかなか方法が見当たらなかった。
StackOverflowで検索しまくって、なかなか検索ワードが見つからない感じ。
最終的に役に立ったのがこの記事の後半だった。
http://www.devsumo.com/technotes/2014/08/tinymce-4-enabling-and-disabling-toolbar-buttons/

サンプル

上記を参考にサンプルを書いた。

test.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>

  var myBtn=null;
  tinymce.init({ 
  selector:'textarea' 
  ,toolbar:"strikeout"
  ,init_instance_callback  : initEditor
  , setup: function(editor) {
    editor.addButton('strikeout', {
      icon: 'strikethrough',
      onclick: function() {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
      },
      onpostrender: function() {
        // toolbarのstrikeoutボタンを変数にセット
        myBtn = this;
      }
    });

    // 外部ボタンが押されたときに実行するメソッド
    editor.on('act1',function(){
      if(myBtn) {
        myBtn.disabled(true);
      }
    })
  }

  });

  // エディタの初期化時に実行するメソッド
  function initEditor(inst) {
    // 外部ボタンのonclickイベントを登録
    $('#btn').on('click',function(){
      tinymce.activeEditor.fire('act1');
    });
  }

  </script>
</head>
<body>
  <textarea>editor</textarea>
  <button id="btn">btn</button>
</body>
</html>

このサンプルでは、「btn」を押すと「act1」メソッドを実行させている。act1のなかでbutton.disabled()を書く。
*disabledの引数で、有効無効切り替えできる。

説明など

Tinymceのボタンのドキュメントはここにある。
https://www.tinymce.com/docs/api/tinymce.ui/tinymce.ui.button/
「hide」というメソッドもあって、これを使うとボタンを隠せる。

tinyMCE.activeEditorでEditorオブジェクトを取れるんだけど、そこからselectButton()みたいなメソッドないのかとか調べた。それは無くて、方法としては
setup -> onPostRender時にボタンオブジェクトをJavascriptの変数にセットする
というやり方になる。

StackOverflowとか見てると、tinyMCE.activeEditorがnullなんだけど?の質問にtinyMCE.get('id')で取れるよ、みたいな回答とかあって、
そうじゃなくてinit_instance_callback を使うとactiveEditorが取れるということがわかった。
ドキュメントが英語なのとカスタマイズしたコードのサンプルが少ないので、何か使い方がよくわからんと思ってしまっていた。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away