Skip to content

Instantly share code, notes, and snippets.

@donnfelker
Created May 12, 2024 21:42
Show Gist options
  • Save donnfelker/9fd3590f5ffbe9e8fd342842ee0d3e6d to your computer and use it in GitHub Desktop.
Save donnfelker/9fd3590f5ffbe9e8fd342842ee0d3e6d to your computer and use it in GitHub Desktop.
Editor.js Image Example Test - for Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Tool Example</title>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@donnfelker/editor-js-image@latest"></script>
</head>
<body>
<div id="editorjs"></div>
<script type="module">
// How to use
// Clone this repo: https://github.com/donnfelker/editor-js-image/
// 1. Create a file in the root: index.html
// 2. Paste the contents of this file into that file
// 3. Start dev server: node dev/server.js
// 4. Start vite dev: node run dev
// 5. Visit and interact with page and editor at localhost url output by dev command above
// 6. Interact with tool/experiment
// For use with forked Editor.JS image tool: https://github.com/donnfelker/editor-js-image/
// This one supports adding a link to an image which will present itself as linkUrl in the
// output JSON
// Check to make sure we can see ImageTool, which is exported from @donnfelker/editor-js-image
console.log(ImageTool);
// the `node dev/server.js` gives us uploadFile url config
window.editor = new EditorJS({
autofocus: true,
tools: {
image: {
class: ImageTool,
config: {
endpoints: {
byFile: 'http://localhost:8008/uploadFile'
}
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment