Для загрузки изображений с компьютера в редактор Tiptap в проекте на Nuxt 3 можно использовать следующий подход:
1. Установите пакет `tiptap-image-upload`:
```
npm install tiptap-image-upload
```
2. Создайте компонент `ImageUploader.vue`, который будет отвечать за загрузку изображений с компьютера:
```vue
<template>
<input type="file" @change="handleFileUpload" />
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
const image = new Image();
image.src = reader.result;
this.$emit('image-uploaded', image.src);
};
if (file) {
reader.readAsDataURL(file);
}
},
},
};
</script>
```
3. Используйте компонент `ImageUploader` в редакторе Tiptap для загрузки изображений:
```vue
<template>
<Editor v-model="content" :extensions="extensions" />
<ImageUploader @image-uploaded="handleImageUpload" />
</template>
<script>
import { Editor, EditorContent, EditorImageUpload } from '@tiptap/vue-3';
import ImageUploader from './components/ImageUploader.vue';
export default {
components: {
Editor,
EditorContent,
EditorImageUpload,
ImageUploader,
},
data() {
return {
content: '',
extensions: [
EditorContent,
EditorImageUpload.configure({
upload: (file) => {
// Действия по загрузке изображения на сервер
return new Promise((resolve) => {
// Верните URL загруженного изображения
resolve('url-изображения');
});
},
}),
],
};
},
methods: {
handleImageUpload(url) {
this.$nextTick(() => {
this.editor.commands().setImage({ src: url });
});
},
},
};
</script>
```
4. Посмотрите, как изображение успешно загрузилось и отобразилось в редакторе Tiptap.
Это примерный подход, который можно использовать для загрузки изображений с компьютера в редактор Tiptap в Nuxt 3. При необходимости можно настроить загрузку изображений на сервер по вашим требованиям.