I have this script trying to use tiptap (the text editor library) and I can't seem to use it. I ran npm install @tiptap/vue-2 @tiptap/starter-kit
and that worked, but now that I am trying to use it with pure Javascript, it's not working.
Here are my files :
Main page :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="reviewpapers.css">
<title></title>
</head>
<body>
<div class="div-block-56" id="editor">
<p>Hello World!</p>
</div>
<script type="module" src="reviewpapers.js"></script>
</body>
</html>
And my js file :
import { Editor } from '/nodemodules/@tiptap/core'
import Document from '/nodemodules/@tiptap/extension-document'
import Paragraph from '/nodemodules/@tiptap/extension-paragraph'
import Text from '/nodemodules/@tiptap/extension-text'
import StarterKit from '/nodemodules/@tiptap/starter-kit'
// create a pure javascript editor that will use the libraries above and render the editor instance in the div with the id of editor
const editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
StarterKit,
],
content: 'Hello World!',
editorProps: {
attributes: {
class: 'editor',
},
},
})
// function that will display the editor
editor.mount('#editor')
// function that will display the editor in the console
console.log(editor.getHTML())
So this doesn't return an error, it returns nothing. When I add a console.log("hi") at the top of the page, nothing happens. Also, npm made a folder with all the nodemodules, which is where the imports are pointing, but I've tried it with out the "/nodemodules/" and it still doesn't work. I've used it in the same file as the html between 2 script tags but that doesn't work, and finally I can't not have my script type be module because then I can't import the things. Please help! I can't seem to figure this out.