LEAF WriterをNext.jsから使用する

概要

LEAF WriterをNext.jsから使用する方法について紹介します。

デモ

以下のURLからお試しいただけます。

https://leaf-writer-nextjs.vercel.app/

以下が画面例です。ヘッダー部分がNext.jsを用いて追加した部分です。エディタ部分はLEAF Writerを使用しています。

ソースコードは以下でご確認いただけます。

https://github.com/nakamura196/leaf-writer-nextjs

使用方法

以下に記載があります。

https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer/-/tree/main/packages/cwrc-leafwriter?ref_type=heads

注意点として、div containerのidをleaf-writer-containerにする必要があります。これを行わない場合、スタイルが崩れることがわかりました。この点は、今後プルリクエストを送りたいと思います。

# const container = document.getElementById('#leaf-writer');
const container = document.getElementById('#leaf-writer-container');

まとめ

LEAF Writerの応用にあたり、参考になりましたら幸いです。