Froala编辑器：将光标集中在页面加载上

Question

I thought something like this would be simple, but apparently not. I'm using a paid version of the Froala Editor, and I love it. However, it needs to focus the cursor when the page loads inside the editor so I don't have to force my users to manually click it.

This is the code from their official docs, but it doesn't seem to work.

# HTML
<textarea id="task_body" autofocus="true">...</textarea>

# JavaScript
editor = $("#task_body").froalaEditor({});
editor.froalaEditor("events.focus");

All I want to do is focus the cursor in the Froala editor field when the page loads; I'd even be happy with a JS solution that calls a focus event after the page loads.

Answer 1

To set focus at Froala init(), do as follows:

$('div#froala-editor')
 .on('froalaEditor.initialized', function (e, editor) {
  editor.events.focus(true);
}).froalaEditor({
  ......editor init settings...
})

This uses the jquery event mechanism to capture the froalaEditor.initialized event and then users the passed-in editor object to call for focus.

To assign focus programatically, meaning any time after Froala init(), use

$('selector').froalaEditor('events.focus', true).

For example, here I use a delay to simulate time passing between Froala init() and the focus call:

  setTimeout(function(){
    $('#edit').froalaEditor('events.focus', true);
      console.clear()
      console.log('fired focus trigger!')
  }, 2000)

Whilst this is useful to know, it is not the gist of the current Froala API documentation which does not provide this insight and seems instead to hint at the syntax being

$('#selector').froalaEditor('events.trigger', 'focus');

which I could not get to work. Maybe Froala should consider clarifying the documentation.

Thanks to Stefan at Froala support who promptly responded to my call for assistance.