Issue

This Content is from Stack Overflow. Question asked by Olivier Lefevre

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.

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.