[SOLVED] How do I access editor.js blocks with CDN?

How do I access editor.js blocks with CDN?

I am exploring editor.js. Rather than using npm, I want to use a CDN. I have managed to get the basic example working as follows:

<script src="https://cdn.jsdelivr.net/npm/@@editorjs/editorjs@latest"></script>
<script>
    const editor = new EditorJS({
    });
</script>

However, I do not know how to use block extensions with a CDN. The examples only show how to do this with npm:

import EditorJS from '@editorjs/editorjs'; 
import Header from '@editorjs/header'; 
import List from '@editorjs/list'; 

const editor = new EditorJS({ 
  holder: 'editorjs', 
  tools: { 
    header: Header, 
    list: List 
  }, 
})

When I add the tools parameter I get an error "Uncaught ReferenceError: Header is not defined". The import statements aren't appropriate as I'm not using npm. So what do I need for a CDN?

Solution

To load Editor.js block extensions with a CDN you can Load individual block scripts listed on the Editor.js website. You can use each block extension before your Editor.js initialization script. For example, if you want to use Header and List blocks, your code would be like:

<script
 
src="https://cdn.jsdelivr.net/npm/@@editorjs/header@latest"></script>

<script
 
src="https://cdn.jsdelivr.net/npm/@@editorjs/list@latest"></script>

<script>
  const Header = window.Header; // Reference the global variable created by the script
  const List = window.List; // Same for List
  const editor = new EditorJS({
    holder: 'editorjs',
    tools: {
      header: Header,
      list: List,
    },
  });
</script>

Or you can use a pre-built package with all blocks included for that purpose you can check this: https://github.com/editor-js/awesome-editorjs