A simple video insertion tool for EditorJS

J'aime beaucoup EditorJS . Cela me permet de créer une interface très simple hébergée sur le Web pour mon blog statique Hugo.

EditorJS a presque tout ce dont j'ai besoin dans un éditeur simple basé sur des blocs. Il possède un plugin pour les en-têtes, le code et même un moyen simple d'ajouter des images à l'éditeur sans nécessiter une infrastructure d'hébergement. Jusqu'à présent, il ne disposait pas d'un moyen simple d'ajouter des vidéos à l'éditeur.

J'ai pris le simple-image plug-in simple-image l' simple-image modifié (juste un peu) pour créer un simple-video in npm module ( npm module ). Maintenant, je peux facilement inclure des vidéos dans ce blog.

Si vous êtes familier avec EditorJS, il est assez simple d'inclure dans vos projets. Il suffit de l'installer comme suit

npm i simple-video-editorjs

Et ensuite, incluez-le dans votre projet comme bon vous semble.

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

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

L'éditeur propose des options simples vous permettant de configurer le mode d'hébergement de la vidéo dans la page:

  1. Lecture automatique - la vidéo sera-t-elle lue automatiquement lorsque la page sera chargée?
  2. muet - le son de la vidéo n’est-il pas activé par défaut (nécessaire pour la lecture automatique)
  3. contrôles - la vidéo aura-t-elle les contrôles HTML par défaut.

Vous trouverez ci-dessous un exemple rapide de vidéo intégrée (et montrant certaines des options).

Quoi qu’il en soit, je me suis amusé à créer ce petit plugin. Ce n’était pas si difficile à créer et la seule chose que j’ai fait est de différer la conversion en base64 qui utilise des images simples et d’utiliser plutôt les URLs Blob.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium