在 'html.set' 或 'snapshot.restore' 之后保留 Froala 编辑器中的插入符位置
Retain caret position in Froala editor after 'html.set' or 'snapshot.restore'
我正在尝试将 Froala 编辑器合并到 React 组件中,但在使用 'html.set' 或 'snapshot.restore' 方法更新编辑器中的内容后,我很难保留插入符号的位置。
目标是将 Froala 的编辑器内容保持在 React 的状态(使用 Flux 存储):
抓取 HTML(并随后将其存储在 Flux 存储中)不是问题:
var content = $('#editor').froalaEditor('html.get', true);
但是,当尝试将状态刷新回 Froala 时:
$('#editor').froalaEditor('html.set', this.state.content);
新的 HTML 更新没有问题,但插入符号停止闪烁。编辑器仍具有焦点,但输入的任何新文本都会插入任何 <p> </p>
标记内容之外。这有效地使插入符号从最后一个位置向上移动。
或者,使用以下方法拍摄和恢复快照:
var snap = $('#editor').froalaEditor('snapshot.get');
$('#editor').froalaEditor('snapshot.restore', snap);
将插入符号移动到编辑器的左上角位置。
在 HTML 设置(或 snapshop 恢复)后,有没有办法获取插入符位置并重新关注该位置?
这是使用 Froala 2.0.0-rc2,但最新的 1.x 版本中存在相同的行为。
恢复快照应该可以。如果您可以制作一个无法正常工作的 jsFiddle,您可以在 Github repo.
上报告它
另一种方法是在获取 HTML 之前调用 selection.save,这样您就可以获取带有适当标记的 HTML。那么如果你有带选择标记的HTML,光标将被放置在它之前的位置。
我正在尝试将 Froala 编辑器合并到 React 组件中,但在使用 'html.set' 或 'snapshot.restore' 方法更新编辑器中的内容后,我很难保留插入符号的位置。
目标是将 Froala 的编辑器内容保持在 React 的状态(使用 Flux 存储):
抓取 HTML(并随后将其存储在 Flux 存储中)不是问题:
var content = $('#editor').froalaEditor('html.get', true);
但是,当尝试将状态刷新回 Froala 时:
$('#editor').froalaEditor('html.set', this.state.content);
新的 HTML 更新没有问题,但插入符号停止闪烁。编辑器仍具有焦点,但输入的任何新文本都会插入任何 <p> </p>
标记内容之外。这有效地使插入符号从最后一个位置向上移动。
或者,使用以下方法拍摄和恢复快照:
var snap = $('#editor').froalaEditor('snapshot.get');
$('#editor').froalaEditor('snapshot.restore', snap);
将插入符号移动到编辑器的左上角位置。
在 HTML 设置(或 snapshop 恢复)后,有没有办法获取插入符位置并重新关注该位置?
这是使用 Froala 2.0.0-rc2,但最新的 1.x 版本中存在相同的行为。
恢复快照应该可以。如果您可以制作一个无法正常工作的 jsFiddle,您可以在 Github repo.
上报告它另一种方法是在获取 HTML 之前调用 selection.save,这样您就可以获取带有适当标记的 HTML。那么如果你有带选择标记的HTML,光标将被放置在它之前的位置。