
ウェビナーの記録 #001:泥臭いフロントエンドの現場(Editor.js)
備忘録としてのnoteです。
視聴したウェビナー
Muddy Web #4 - 泥臭いフロントエンドの現場 Webフロントエンドの現場から明日使えそうな技術や事例を学ぶ
(イベント概要)
Muddy WebはMuddy = 泥臭いとして、Webフロントエンドの開発現場における話やケーススタディなど泥臭さのある話をもとに学びを得ることを目的として開催しています。
現場で遭遇した具体的な体験を元に実際に明日から使えるかもしれないWebフロントエンド的な技術や知識を参加者の皆さまと共有し合うことを通して、フロントエンド開発の糧になれればと思います。
(内容)
17:55 開場
18:00 - 18:05 オープニング
18:05 - 18:20 Amebaブログの会員画面システム刷新の道程
18:25 - 18:45 WINTICKET QA における Autify 活用
18:50 - 19:00 フロントエンドで学んだことをデータ分析で使ってみた話
19:05 - 19:25 Webエディタ開発を支える技術
19:25 - 19:30 クロージング
Webエディタ開発を支える技術
Editor.jsが気になったので、画面のスクショを残していきます。
Editor.jsについて
Editor.jsはWeb上で使用できるブロックエディタの一つです。 Editor.jsは、複数のブロックタイプ(テキスト、画像、リストなど)を組み合わせてドキュメントを作成するためのAPIを提供します。Editor.jsはJavaScriptで書かれており、カスタマイズ可能なインターフェイスを提供します。また、Editor.jsはバックエンドに対して独立しているため、さまざまなバックエンドと組み合わせて使用できます。

プラグイン実装に潜む課題


解決方法



まとめ・所感

さいごに
Editor.jsのサイトで実際にデモを触れますが、ウェブエディタとして、とても使い易いです。カスタマイズもできて、一からウェブエディタを実装するよりも簡便にできそうですね。
Editor.jsでは、次のような方法でカスタマイズできます。
1.カスタムブロックの追加: Editor.jsは、カスタムブロックを追加するためのAPIを提供しています。これにより、独自のブロックタイプを作成し、エディタに追加することができます。
2.カスタムツールの追加: Editor.jsは、カスタムツールを追加するためのAPIを提供しています。これにより、独自の機能を持つツールバーアイテムを作成し、エディタに追加することができます。
3.UIのカスタマイズ: Editor.jsは、UIをカスタマイズするためのAPIを提供しています。これにより、エディタの見た目を変更することができます。
4.エディタのイベントハンドラのカスタマイズ: Editor.jsは、エディタのイベントハンドラをカスタマイズするためのAPIを提供しています。これにより、エディタの挙動を変更することができます。
これらのカスタマイズには、Editor.jsのドキュメンテーションに従ってJavaScriptを書くことができます.
公式ページから、ぜひ試してみてください。