tinyMCE 模糊事件

Question

你好 当用户在tinyMCE文本区域中完成书写并单击外部某处（onBlur）时，我想做一些事情。 到目前为止我已经尝试过：

$('#id_topic_text_parent').live('blur',function(){
    alert('asd')
//I saw #id_topic_text_parent in firebug, it is span containing the tiny mce
});

还有

$('#id_topic_title').blur(*and*)live('blur...
tinyMCE.activeEditor.blur(*and*)live('blur...

但这行不通。
你能帮助我吗？

Answer 1

根据http://www.tinymce.com/wiki.php/api4:event.tinymce.Editor.blur

这对我有用

setup : function(ed) {
    ed.on('blur', function(e) {
        alert('blur');
    });
},

Answer 2

您可以使用此方法来解决您的问题。初始化tinymce时，将设置参数设置为以下内容（内部

tinyMCE.init({...})

...
theme: "advanced",   // example param
plugins = 'code',    // example param
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) {
            // Do something when the editor window is blured.
            alert('blur!!!');
        });
    });
},
cleanup: true,      // example param
...

Answer 3

请使用

function myCustomOnChangeHandler(inst) {
        alert("Some one modified something");
        alert("The HTML is now:" + inst.getBody().innerHTML);
}

tinyMCE.init({
        ...
        onchange_callback : "myCustomOnChangeHandler"
});

参考：http://www.tinymce.com/wiki.php/Configuration:onchange_callback

一旦用户“模糊”该区域，就会调用此函数；

Answer 4

我用它来关闭模糊时的外部工具栏，它似乎可以工作（目前仅在FF上测试）

function showHideBar(sho,aid) { // aid=id not used
    if(sho) {
        $( ".mceToolbar,.mceExternalClose" ).show();
    } else {
        $( ".mceToolbar,.mceExternalClose" ).hide();
    }
}

tinyMCE.init({

    // ....

    theme_advanced_toolbar_location: "external",
    resize : true,
    setup : function(ed) {
        ed.onInit.add(function(ed, event) {
            $(ed.getBody()).blur(function() {
                // alert("blur");
                showHideBar(false,ed.id);
            });

            $(ed.getBody()).focus(function() {
                // alert("focus");
                showHideBar(true,ed.id);
            });

        });
    },

    // ....

}

Answer 5

编辑：

$('#id_topic_text_parent textarea').live('blur', function() {
   alert('asd');
});

您可以发布 #id_topic_text_parent 范围的 html 吗？

$('#id_topic_text_parent').find('textarea').blur(function(){ 警报（'asd'）； });

Answer 6

假设您有文本区域：

<textarea id="mytext">

您初始化了 TinyMCE 编辑器：

tinymce.init({
    selector: '#mytext',
    // ...
});

您可以使用这样的代码绑定“onblur”事件：

tinyMCE.get('mytext').on('blur', function(e) {
    console.log(this); // "this" contains tinymce.Editor object
});

参考及详情：https://www.tiny.cloud/docs/api/tinymce/tinymce.focusevent/

Answer 7

如果无法在 init 上执行此操作，您可以在之后随时执行此操作，只需通过 textarea id 选择编辑器，然后添加模糊事件即可。

如果您的文本区域 ID 是例如“editor_2”，即

<textarea id="editor_2"></textarea>

您的 javascript 初始化代码类似于以下内容，

tinyMCE.init({selector: '#editor_2'});

然后你可以把它放在 JS 中的任何地方：

tinyMCE.get('editor_2').on('blur', e => console.log("editor_2 blur event", e));

在 v4 上测试正常。