Webページを編集する際、管理画面で行わせる方式だと、編集した内容と実際の適用された状態とかかけ離れていることがあります。開発者であればイメージできることでも、そうでない人たちにとってはとても難しいでしょう。 そこで便利なのが、Webページ上でWYSIWYGに編集できる仕組みです。今回はReact向けに提供されるEdtr.ioを紹介します。

Edtr.ioの使い方

こちらが編集できる画面になります。

決まったテンプレートでUIコンポーネントを追加できます。

コンテンツを追加して、その場で編集できます。

テンプレートになっているので編集が容易です。

テキストや画像を差し込めます。

Edtr.ioはあらかじめ定義されているテンプレートを使ってUIを差し込みます。完全に自由ではないということで、開発者ではない人たちが編集するのが容易になるでしょう。ReactベースでWebサイトを作られている場合に採用してみたいソフトウェアです。

Edtr.ioはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

Edtr.io edtr-io/edtr-io: Edtr.io is an open source WYSIWYG in-line web editor written in React. Its plugin architecture makes Edtr.io lean and extensive at the same time.