https://github.com/carlosvaldesweb/tiptap-extension-upload-image

https://github.com/carlosvaldesweb/tiptap-extension-upload-image

Last synced: about 17 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/carlosvaldesweb/tiptap-extension-upload-image
• Owner: carlosvaldesweb
• License: mit
• Created: 2023-08-26T02:56:36.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-22T20:49:30.000Z (9 months ago)
• Last Synced: 2024-10-11T23:17:51.588Z (4 months ago)
• Language: TypeScript
• Size: 45.9 KB
• Stars: 33
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-tiptap - tiptap-extension-upload-image
• awesome-tiptap - tiptap-extension-upload-image

README

        
# Tiptap Extension Upload Image

The seamless image upload feature with real-time preview. Effortlessly add images to your content while a dynamic placeholder fills in during the upload process. Enhance your editing experience with this intuitive extension.

## Installation

```bash

npm install tiptap-extension-upload-image

```

## Usage

#### Import package and css

```js

import UploadImage from 'tiptap-extension-upload-image';

import 'tiptap-extension-upload-image/dist/upload-image.min.css';

//Optional

import axios from 'axios';

```

#### Register in editor extensions

```js

extensions: [

  StarterKit,

  UploadImage.configure({

    uploadFn: uploadFn

  }),

]

```

#### Create a function to upload images

This function is used to upload images using axios or the manager of your preference. It should return a string with the image URL in case of success. In case of an error, it should throw an exception. I am sending this function in the extension's configuration.

```js

const uploadFn = (file) => {

    var formData = new FormData();

    formData.append("image", file);

    return axios.post('/tools/guidelines/media', formData)

    .then((response) => {

        return response.data.url

    })

    .catch((e) => {

        //Optionaly you can send only throw

        throw(e.response.data.error);

    }); 

}

```

#### Add command to your menu button

Add this line to your button to open the input type file to select image.

```js

editor.chain().focus().addImage().run()

```

#### Styling

You can overwrite the color of spinner.

```css

.image-uploading::before {

    border-top-color: #1e986c;

}

```