4

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?

2

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.");
                    });
                }'
            )
));
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.