A simple video insertion tool for EditorJS

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I really like <a href="https://editorjs.io/">EditorJS</a>. It's let me create a very simple web-hosted interface for my static Hugo blog.</p> <p>EditorJS has most of what I need in a simple block-based editor. It has a plugin for headers, code, and even a simple way to add images to the editor without requiring hosting infrastructure. It doesn't have a simple way to add video's to the editor, until now.</p> <p>I took the <a href="https://github.com/editor-js/simple-image">simple-image</a> plugin repository and changed it up (just a tad) to create a <a href="https://github.com/PaulKinlan/simple-video">simple-video</a> plugin (<a href="https://www.npmjs.com/package/simple-video-editorjs">npm module</a>). Now I can include videos easily in this blog.</p> <p>If you are familar with EditorJS, it's rather simple to include in your projects. Just install it as follows</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">npm i simple-video-editorjs </code></pre></div><p>And then just include it in your project as you see fit.</p> <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">const SimpleVideo = require('simple-video-editorjs'); var editor = EditorJS({ ... tools: { ... video: SimpleVideo, } ... }); </code></pre></div><p>The editor has some simple options that let you configure how the video should be hosted in the page:</p> <ol> <li>Autoplay - will the video play automatically when the page loads</li> <li>muted - will the video not have sound on by default (needed for autoplay)</li> <li>controls - will the video have the default HTML controls.</li> </ol> <p>Below is a quick example of a video that is embedded (and showing some of the options).</p> <figure><video src="https://paul.kinlan.me/videos/2019-11-06-a-simple-video-insertion-tool-for-editorjs-0.mp4" alt="Showing Options for EditorJS simple video." autoplay muted></video></figure> <p>Anyway, I had fun creating this little plugin - it was not too hard to create and about the only thing that I did was defer the conversion to base64 which simple-images uses and instead just use the Blob URLs.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan