I wan’t to detect/callback when a wp_editor(..) output text-area/content-editable is focus. Quite a simple question that I could not find anywhere.

<div class="compose-body">
<?php
     $content="";
     $editor_id = 'compose-editor';
     wp_editor( $content, $editor_id, array(
         "wpautop" => true,
         "tabindex" => 1,
         "editor_height" => 400,
         "teeny" => true
    ));
?>
</div>

This should works, but because of iframe/delegation this make it difficult to select. e.g :

$(".compose-body").on("click focus", "[data-id='compose-editor']", function(){
    console.log("YEPP focus/clicked!");
});

EDIT —-

wp_editor() == tinyMCE and the only callbacks this has is FocusEvent and Editor.focus, but I had in do a nasty hack to make it work:

setTimeout(function(){
    var a = tinymce.editors[0].on("focus", function(){
        console.log("YEPP!");
    });
}, 300);

This works but is a hack of a solution, any other way (using jQuery preferably) to create a selector for focus?

1 Answer
1

You can pass an array of settings to the editor instance.
For possible values please refer to the tinymce documentation, in your case ‘init_instance_callback’ might be helpful.

https://www.tinymce.com/docs/configure/integration-and-setup/#init_instance_callback

  wp_editor('', 'sedemoeditor', array(
        'tinymce' => array(
            'init_instance_callback' => 'function(editor) {
                        editor.on("focus", function(){
                            console.log("Editor: " + editor.id + " focus.");
                    });
                }'
            )
));

Leave a Reply

Your email address will not be published. Required fields are marked *