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 "../"
<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.