web-dev-qa-db-ja.com

クリックでTinyMCEプラグインウィンドウを閉じる

私はTinyMCEツールバーにボタンを追加する小さなプラグインを作成しました。クリックすると、editor.windowManager.open()経由でポップアップウィンドウが開きます。そのポップアップは、（1）[キャンセル]または[OK]ボタンをクリックするか、（2）escキーを押すことによって閉じることができます。

プラグインのポップアップをクリックして閉じることもできます（ポップアップ自体の外側にあるTinyMCEオーバーレイをクリックした場合など）。 WPのInsert/editリンクはその機能を持ったポップアップを起動しますが、プラグインがカスタムダイアログボックスを使用していること、そしてこれを可能にするTinyMCE APIメソッド/プロパティがあることを望んでいました。

参照用に、これが私のプラグインです。

(function() {
  tinymce.PluginManager.add('custom_plugin', function(editor, url) {
    editor.addButton('custom_plugin', {
      text: 'Plugin',
      icon: false,
      onClick: function() {
        editor.windowManager.open({
          title: 'Custom Plugin',
          body: [
            {
              type: 'textbox',
              name: 'theText',
              label: 'Text',
              value: '',
              minWidth: 800
            }
          ],
          onsubmit: function(e) {
            editor.insertContent('[tag]'+e.data.theText+'[/tag]');
          }
        });
      });
    });
  });
})();
javascripttinymcevisual-editorplugin-tinymce
1
cfx

あなたはずっと前に質問をしましたが、私は似たようなものを探していて解決策を見つけました。

編集後の画面（ここではtinyMCEがあります）に管理者サイドスクリプトをエンキューします。次に以下のコードを使用してください。

(function($) {
    'use strict';

    $(document).ready(function() {
        $(document).on( 'click', '#mce-modal-block', function() {
            tinyMCE.activeEditor.windowManager.close();
        });
    });

})(jQuery);

このようにあなたがそれの外側をクリックすることによってどんなポップアップでも閉じることができるtinyMCEから来ることができます。

4
Sohan Zaman