Как в Nuxt 3 используя Tiptap загружать изображения с компьютера?

Как можно реализовать загрузку картинок из файловой системы в редакторе Tiptap при разработке проекта на Nuxt 3?
  • 23 августа 2024 г. 16:24
Ответы на вопрос 1
Для загрузки изображений с компьютера в редактор 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. При необходимости можно настроить загрузку изображений на сервер по вашим требованиям.
Похожие вопросы