【问题标题】:Froala editor: focus cursor on page loadFroala 编辑器:将光标聚焦在页面加载上
【发布时间】:2017-02-02 04:49:39
【问题描述】:

我认为这样的事情会很简单,但显然不是。我正在使用 Froala 编辑器的付费版本,我喜欢它。但是,当页面在编辑器中加载时,它需要聚焦光标,所以我不必强迫我的用户手动点击它。

这是他们官方文档中的代码,但它似乎不起作用。

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

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

我要做的就是在页面加载时将光标聚焦在 Froala 编辑器字段中;我什至对在页面加载后调用焦点事件的 JS 解决方案感到满意。

【问题讨论】:

  • 我已经解决了同样的问题两天了。仍然找不到解决方案,示例不起作用
  • 嗨 - 你最终找到解决方案了吗?我发现在 API 文档中提到了“events.focus”,但不清楚这是事件观察者还是触发事件 - 文档没有定论。我还在 github.com/froala/wysiwyg-editor/issues/58 的 git 网站上看到了一个 hack。但是,那是 2014 年,指的是即将推出的功能。那么请问你最后做了什么?还有@Ruslan 你做了什么?
  • @VanquiishedWombat 我已经尝试了有问题的代码,在 github 中,没有一个工作。我还尝试查看 html,看看我是否可以想出一个技巧来使其成为焦点,但没有任何效果
  • 感谢@Ruslan - 我也做了同样的事情,现在在新的 events.focus 函数中加入了盲目尝试。我无法获得良好 UX 所需的东西。我在他们的 git 上提出了一个案例。
  • @Ruslan - 在 Froala 支持的 Stefan 的热门新闻下方查看我的回答。

标签: javascript setfocus froala


【解决方案1】:

要在 Froala init() 上设置焦点,请执行以下操作:

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

这使用jquery事件机制来捕获froalaEditor.initialized事件,然后使用传入的编辑器对象来调用焦点。

要以编程方式分配焦点,即在 Froala init() 之后的任何时间,请使用

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

例如,这里我使用延迟来模拟 Froala init() 和焦点调用之间的时间传递:

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

虽然了解这一点很有用,但它不是当前 Froala API 文档的要点,它没有提供这种见解,而是似乎暗示了语法是

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

我无法开始工作。也许 Froala 应该考虑澄清文档。

感谢 Froala 支持部门的 Stefan,他及时响应了我的求助电话。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-05-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-23
    • 1970-01-01
    • 1970-01-01
    • 2019-12-04
    相关资源
    最近更新 更多