A simple video insertion tool for EditorJS

Мне очень нравится EditorJS . Это позволило мне создать очень простой веб-интерфейс для моего статичного блога Hugo.

EditorJS содержит большую часть того, что мне нужно, в простом блочном редакторе. Он имеет плагин для заголовков, кода и даже простой способ добавления изображений в редактор без необходимости размещения инфраструктуры. До сих пор не было простого способа добавить видео в редактор.

Я взял simple-image репозиторий плагин и изменил его (только чуть) , чтобы создать simple-video плагин ( npm module ). Теперь я могу легко включить видео в этот блог.

Если вы знакомы с EditorJS, это довольно просто включить в ваши проекты. Просто установите его следующим образом

npm i simple-video-editorjs

А затем просто включите его в свой проект, как считаете нужным.

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

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

В редакторе есть несколько простых опций, которые позволяют вам настроить способ размещения видео на странице:

  1. Автозапуск - будет ли видео воспроизводиться автоматически при загрузке страницы
  2. muted - по умолчанию звук в видео не будет включен (необходим для автозапуска)
  3. элементы управления - будут ли у видео стандартные элементы управления HTML.

Ниже приведен быстрый пример встроенного видео (и показаны некоторые параметры).

В любом случае, я получал удовольствие от создания этого маленького плагина - его было не так сложно создать, и единственное, что я сделал, - это отложил преобразование в base64, которое использует simple-images, и вместо этого просто использовал URL-адреса BLOB-объектов.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium