Unable to configure EditorJs

April 11, 2024

I have a webpage where I want to use EditorJs.The html for the same is :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Example</title>
    <!-- Include Editor.js styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest/dist/editor.min.css" />
</head>
<body>
    <div id="starter">Application begins here!</div> 
    <div id="editorjs"></div>
    <button id="save">Save Article</button>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script  type="module" src="sampler.js"></script>
</body>
</html>

The sampler.js file looks like:

import {EditorJS} from '@editorjs/editorjs';
import {Header} from '@editorjs/header';

const editor = new EditorJS({
    holder:"editorjs",
    tools:{
        header:{
            class:Header,
            inlineToolbar:['link']
        },
        list:{
            class:List,
            inlineToolbar:['link','bold']
        }
    }
})

let saveBtn=document.querySelector('button')

saveBtn.addEventListener('click',()=>{
    editor.save().then((outputData)=>{
        console.log(outputData)
    })
})

Im using CDN import so how should my import statements in sampler.js look like.Currently Im getting this error:

Uncaught TypeError: Failed to resolve module specifier "@editorjs/editorjs". Relative references must start with either "/", "./", or "../"

>Solution :

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

new EditorJS({
  holder: 'editorjs-container',
  tools: {
    header:{
        class:Header,
        inlineToolbar:['link']
    },
    list:{
        class:List,
        inlineToolbar:['link','bold']
    }
  }
});

If it is referenced by CDN, you don’t need import to use it directly.