4

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.

Dan L
  • 4,319
  • 5
  • 41
  • 74
  • 1
    I have worked on the same problem for 2 days now. Still can't find the solution and examples don't work – Ruslan Aug 18 '17 at 19:22
  • Hi - did you eventually find a solution ? I found mention of "events.focus" in the API docs but it is unclear as to whether this is an event observer or triggering the event - the doc is inconclusive. I also saw a hack on the git site at https://github.com/froala/wysiwyg-editor/issues/58. However, that as 2014 and referred to a forthcoming feature. So what did you do in the end please ? Also @Ruslan what did you do ? – Vanquished Wombat Sep 25 '17 at 15:02
  • 1
    @VanquishedWombat I have tried the code in question and in the github, none worked. I also tried to look though the html to see if i can come up with a hack to make it focus but nothing worked – Ruslan Sep 25 '17 at 15:14
  • Thanks @Ruslan - I did the same and now included blind attempts at the new events.focus function. I cannot get what I need for good UX. I have raised a case on their git. – Vanquished Wombat Sep 25 '17 at 16:19
  • 1
    @Ruslan - see my answer below hot news from Stefan at Froala support. – Vanquished Wombat Sep 26 '17 at 12:38

1 Answers1

2

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.

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67