如何触发 tinymce 4.x 焦点和模糊事件

Question

我意识到这个问题已被多次询问和回答，但我仍然无法使许多解决方案发挥作用。似乎大多数讨论都较旧，并且可能与 4.x 不兼容。

我的目标：能够在焦点或模糊时触发一些 javascript 函数。这是基本代码：

$('.tiny-mce').tinymce({
    script_url : '/xm_js/tinymce4/tinymce.min.js',
});

我试过这样的例子：

$('.tiny-mce').tinymce({
    script_url : '/xm_js/tinymce4/tinymce.min.js',

    setup : function(ed) {
        ed.onInit.add(function(ed, evt) {

        var dom = ed.dom;
        var doc = ed.getDoc();

            tinymce.dom.Event.add(doc, 'blur', function(e) {
                alert('blur!!!');
            });
        });
    }
});

returns:"Uncaught TypeError: Cannot call method 'add' of undefined"

$('.tiny-mce').tinymce({
    script_url : '/xm_js/tinymce4/tinymce.min.js',
});

tinymce.activeEditor.on('focus', function(e) {
    console.log(e.blurredEditor);
});

返回：“未捕获的类型错误：无法调用未定义的方法‘on’” （但不确定我是否把它放在正确的地方）

$('.tiny-mce').tinymce({
    script_url : '/xm_js/tinymce4/tinymce.min.js',

    setup: function(editor) {
        editor.on('focus', function(e) {
            console.log('focus event', e);
        });
    }
});

返回：“未捕获的语法错误：意外的标识符”

这有效，但仅在启动编辑器时有效。我尝试过但还没有工作的其他事情：

tinymce.FocusManager tinymce.activeEditor

我错过了什么？谢谢。

更新：找到了一个效果很好的解决方案： Why TinyMCE get focus and blur event, when user jump from other input field?

Answer 1

请参阅http://fiddle.tinymce.com/8Xeaab/1 的小提琴

tinymce.init({
    selector: "#editme",
    inline: true,
    setup: function(editor) {
        editor.on('focus', function(e) {
            console.log("focus");
        });

        editor.on('blur', function(e) {
            console.log("blur");
        });
    }
});

Answer 2

您的提示标题是关于触发焦点和模糊事件，但您实际上是在询问处理这些事件。 如果有人仍在寻找触发事件，解决方案应该是：

tinymce.init({
        selector: "#textarea_123",
        ...
     });

然后，设置焦点：

var inst = tinyMCE.EditorManager.get('textarea_123');
inst.focus();

Answer 3

我最近遇到了这个问题，虽然我是在 angularjs 中执行此操作，但我能够通过创建一个指令来解决它，该指令在您单击它时注册，然后清除 html 正文中的 activeElement。我将在下面添加指令。您只需像在标签中添加 ng-cloak 一样添加点击关闭即可在对象上调用它。

(function () {
  'user strict';

  angular.module('app.directives').directive('clickOff', ClickOff);

  function ClickOff($parse, $document) {
    var directive = {
      link: link
    };

    return directive;

    function link(scope, $element, attr) {

      var fn = $parse(attr["clickOff"]);

      $element.bind('click', function (event) {
        event.stopPropagation();
      });

      angular.element($document[0].body).bind("click", function (event) {
        scope.$apply(function () {
          $document[0].activeElement.blur();
          fn(scope, { $event: event });
        });
      });
    }
  }
})();