node.jsexpressejseditorjs

EditorJS not showing up? How to fix this?


I am creating a blog. Here I am using EditorJS as my blog-post editor. I am using nodejs, express and ejs. I can't see the EditorJS interface on my screen. Here is my code.

code for app.js:

const express = require('express')
const app = express()

app.use(express.json())
app.set('view engine', 'ejs')

app.get('/', function(req, res) {
    res.render('index.ejs')
})

app.listen(3000, function(){
    console.log('Server is running on port 3000.')
})

code for index.ejs file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home | Editor JS</title>
</head>

<body>
    <form action="/create-post" method="POST">
        <label for="title">Title</label>
        <input type="text" class="form-control" name="title" placeholder="Title" required>
        <label for="content">Content</label>
        <input type="text" id="editorjs" name="content" placeholder="Content" required>
        <button type="submit">Create</button>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script>
        const editor = new EditorJS('editorjs')
    </script>
    </body>
</html>

How to make the EditorJS interface to be appeared in the ejs file?


Solution

  • After several researches I found that, instead of using <input id="editorjs"> if I use <div id="editorjs"></div>, EditorJS interface shows up.