Question on Adding Images

[bikathi]

Hey, thanks for this awesome Nuxt plugin. I am customizing it for use in my own project but I am having issues figuring out how to add images. The official TipTap has VueJS documentation here TipTap working with images but I can seem to get it to properly work. Any leads or code samples on how I can do this?

[modbender]

Hey sorry for the late answer

The documentation is actually incomplete about this right now, so let me first tell you that out of the box not all extensions are installed together with this plugin, because there are many external plugins that needs manual installation given by TipTap themselves.

By default all the extensions that come with StarterKit is installed and any other except the one mentioned in Extension section of README needs to be installed manually. Because if all of them are included then node_modules would end up taking space regardless of whether you use those extensions or not.

Atleast this is the case for now, which might change in future.

You can view in defaults.ts for list of available extensions without manual installation

For the Image that you are asking for - you need to do something like below in your vue file:

<script setup>
import Image from "@tiptap/extension-image";

const editor = useEditor({
  autofocus: false,
  extensions: [
    TiptapStarterKit.configure({
      codeBlock: false,
    }),
    Image,
  ],
});
</script>

P.S. you might need FileHandler if you are planning for uploading images.

[bikathi]

Hey @modbender. Sorry it took time to come back with a response. Your solution works 100% fine. I am able to add an image by hard-coding a URL into the .setImage() function like this:

.setImage({
    src: 'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg',
    alt: 'Sample Alt Text',
})

However, the FileHandler seems to be paid so it's not an option for me. That's not an issue though. A simple workaround is to change the button that inserts the file into an <input type="file" /> then add some event listener to upload the select file to a custom endpoint and get back the link then I can call the setImage() with that link. Thank you so much for your help.

[modbender]

Ok glad it helped!