A simple video insertion tool for EditorJS

Ich mag EditorJS wirklich. Damit kann ich eine sehr einfache, im Web gehostete Oberfläche für meinen statischen Hugo-Blog erstellen.

EditorJS hat das meiste, was ich in einem einfachen blockbasierten Editor brauche. Es verfügt über ein Plugin für Header, Code und sogar eine einfache Möglichkeit, Bilder zum Editor hinzuzufügen, ohne dass eine Hosting-Infrastruktur erforderlich ist. Bisher gibt es keine einfache Möglichkeit, Videos zum Editor hinzuzufügen.

Ich nahm das simple-image Plugin-Repository und änderte es (nur ein bisschen), um ein simple-video Plugin ( npm module ) zu erstellen. Jetzt kann ich problemlos Videos in diesen Blog einbinden.

Wenn Sie mit EditorJS vertraut sind, ist es ziemlich einfach, es in Ihre Projekte aufzunehmen. Installieren Sie es einfach wie folgt

npm i simple-video-editorjs

Und fügen Sie es dann einfach in Ihr Projekt ein, wie Sie es für richtig halten.

const SimpleVideo = require('simple-video-editorjs');

var editor = EditorJS({
  ...
  
  tools: {
    ...
    video: SimpleVideo,
  }
  
  ...
});

Der Editor verfügt über einige einfache Optionen, mit denen Sie konfigurieren können, wie das Video auf der Seite gehostet werden soll:

  1. Autoplay - Das Video wird automatisch abgespielt, wenn die Seite geladen wird
  2. stummgeschaltet - hat das Video standardmäßig keinen Ton (für die automatische Wiedergabe erforderlich)
  3. Steuerelemente - Verfügt das Video über die Standard-HTML-Steuerelemente?

Im Folgenden finden Sie ein kurzes Beispiel für ein Video, das eingebettet ist (und einige der Optionen zeigt).

Wie auch immer, ich hatte Spaß beim Erstellen dieses kleinen Plugins - es war nicht allzu schwer zu erstellen und das einzige, was ich tat, war, die Konvertierung auf base64 zu verschieben, die simple-images verwendet, und stattdessen einfach die Blob-URLs zu verwenden.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium