4

Froala エディターを React コンポーネントに取り込もうとしていますが、'html.set' または 'snapshot.restore' メソッドを使用してエディターのコンテンツを更新した後、キャレットの位置を保持するのに苦労しています。

目標は、(Flux ストアを使用して) React の状態で Froala のエディター コンテンツを維持することです。

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 が設定された (またはスナップショップが復元された) 後、キャレットの位置を取得してその位置に再度フォーカスする方法はありますか?

これは Froala 2.0.0-rc2 を使用していますが、最新の 1.x リリースにも同じ動作が存在します。

4

1 に答える 1

2

スナップショットの復元は機能するはずです。動作しない jsFiddle を作成できる場合は、Github repoで報告できます。

もう 1 つの方法は、HTML を取得する前に selection.save を呼び出して、マーカーを配置した HTML を取得することです。次に、選択マーカーを含む HTML がある場合、カーソルは以前の位置に配置されます。

于 2015-09-16T20:08:47.950 に答える