スレートエディタにGIFを挿入する方法

Question

アプリにスレート テキスト エディターがあり、giphy リンクを使用して gif を挿入したいと考えています。 insertNodes 関数を使用して追加しようとしましたが、新しい行が追加されるだけのようです。 GIF を追加するために使用する関数を以下にリストしました;

リーリー

私は公開されている gif リンクを使用して、実際に gif をエディタに追加できることを確認しました。したがって、リンクやその他の問題はないと確信しています。また、他の場所からのリンクを使用してこれを実行しようとしましたが成功しませんでしたので、助けていただければ幸いです。

レンダリング要素関数も以下に追加します;

リーリー

最後に要素の定義です;

ああああ

Answer 1

スレートのドキュメントによると: https://docs.slatejs.org /walkthroughs/03-defining-custom-elements

こちらの記事もご覧ください: Slate.js と React でテキストを整列させるには?

特定のモディファイアに基づいてさまざまなコンポーネントを表示するには、renderElement コールバックを変更する必要があります。たとえば、コード要素を操作していて、それをエディターに表示したい場合、通常は、スレート ノードに値 code を持つ type 属性を与えます。次に、renderElement 関数で、渡す props にレンダリングするタイプが含まれます。

したがって、あなたのユースケースでは次のようにします;

リーリー