nuxt.jsでtwitterのようなテキストエリアを実装する。

Question

質問

twitterの投稿画面で、urlやハッシュタグを入力すると自動でリンクに変換したりサジェストを表示してくれるのですが、
nuxt.jsであれを実装する方法はありますか？

リッチテキストエディタで不要な物を消してしまえばできるのではと考えているのですが、
具体的な実装方法は思いついていません。

サンプル画像

Answer 1

サジェストの表示方法~テキストエリア反映までの実装について

実務で実装した方法としては、サジェストを表示する用に、コンポーネントを作成しました。
divとかは用いずbuttonを使用しvalueに値を保持して、buttonをクリックした時にvalueをテキストエリアのdataに設定しました。
tabindexを設定するとtabで移動できるので何かと便利だったリします。

サジェストを表示するタイミングは、テキストエリアに文字を１文字入力するごとにAPIにリクエストを飛ばしてレスポンスをサジェストコンポーネントに配列データを渡していました。

文字ベースの回答になってしまいましたが、少しでも参考になれば幸いです。

Comments

[TaikiNamioka]

ありがとうございます！

urlを入力した際に、urlと判定してリンク化はどのように実装されておりましたでしょうか？

また、テキスト入力部のdomの構成も教えていただけると嬉しいです！