React CMS’de Quill Editor ve Resim Yükleme Entegrasyonu

React CMS’de Quill Editor ve Resim Yükleme Entegrasyonu

Merhaba! Fatih Soysal olarak, bu yazıda React tabanlı bir içerik yönetim sistemine (CMS) Quill Editor’ü entegre etmenin ve bu editör üzerinden resim yükleme özelliğini nasıl ekleyebileceğimizi detaylı bir şekilde ele alacağız. Quill, zengin metin düzenleme deneyimi sunan popüler bir JavaScript kütüphanesi. Bu entegrasyon, kullanıcılarınızın görsel açıdan zengin ve etkileşimli içerikler oluşturmasını sağlayacaktır. Öncelikle, Quill Editor’ün temel özelliklerini ve React ile olan uyumluluğunu inceleyelim. Ardından, adım adım resim yükleme işlevselliğini nasıl ekleyebileceğimizi açıklayacağız. Bu rehber, hem yeni başlayanlar hem de deneyimli geliştiriciler için faydalı olacaktır.

Quill Editor’ü React Projesine Entegre Etme

Quill’ü React projenize dahil etmenin en kolay yolu, npm veya yarn paket yöneticilerini kullanmaktır. Öncelikle, projenize Quill ve Quill’ün gerekli modüllerini yükleyin:

npm install quill quill-image-resize-module

Kurulumdan sonra, Quill’ü React bileşeninizde kullanabilirsiniz. Aşağıdaki kod örneği, temel bir Quill Editor bileşeni göstermektedir:

import React, { useRef, useEffect } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // veya quill.bubble.css

const Editor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    const quill = new Quill(editorRef.current, {
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline'],
          ['image'],
          ['link']
        ]
      },
      theme: 'snow' // veya 'bubble'
    });
  }, []);

  return 
;
};

export default Editor;

Bu kod, basit bir Quill Editor örneği sunmaktadır. Ancak, bu şekilde resim yükleme işlemi henüz desteklenmemektedir. Şimdi, bu işlemi nasıl ekleyeceğimize bakalım.

Resim Yükleme İşlevselliğini Ekleme

Quill’ün kendi resim yükleme özelliği bulunmamaktadır. Bu nedenle, kendi resim yükleme mantığımızı oluşturmalıyız. Bu, bir form, bir API uç noktası ve dosya yükleme işlemini yöneten kod gerektirir. Örneğin, bir bulut depolama hizmeti (AWS S3, Google Cloud Storage vb.) kullanabilir veya sunucuda bir dosya yükleme noktası oluşturabilirsiniz. Bu işlem için, quill-image-resize-module modülünü de kullanabiliriz, bu modül ile yüklediğimiz resimlerin boyutlarını da ayarlayabiliriz.

Öncelikle, sunucuda resim yükleme işlemini yöneten bir API uç noktasına ihtiyacımız var. Bu uç nokta, dosyayı alıp depolayacak ve daha sonra Quill editörüne gösterebileceğimiz bir URL döndürecektir. Sonrasında, Quill’in image modülünü özelleştirebilir ve kendi upload fonksiyonumuzu sağlayabiliriz. Bu fonksiyon, dosyayı API uç noktasına gönderecek ve aldığı URL’yi Quill editörüne ekleyecektir. Aşağıda bu işlemi gösteren basitleştirilmiş bir örnek mevcuttur. Bu örnekte, dosya yükleme işlemi sunucu taraflı olarak ele alınıyor ve sadece başarılı yükleme sonucu Quill editörüne yansıtılıyor.

import React, { useRef, useEffect, useState } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import ImageResize from 'quill-image-resize-module';

const Editor = () => {
  const editorRef = useRef(null);
  const [imageUploadUrl, setImageUploadUrl] = useState('');


  useEffect(() => {
    const quill = new Quill(editorRef.current, {
      modules: {
        toolbar: [
            ['bold', 'italic', 'underline'],
            ['image'],
            ['link']
        ],
        imageResize: {}
      },
      theme: 'snow'
    });
    quill.getModule('imageResize').enable();

    quill.on('text-change', (delta, oldDelta, source) => {
        //Metin değişikliklerini izle
    });

    quill.on('selection-change', (range, oldRange, source) => {
        //Seçimi izle
    });

    quill.on('editor-change', (eventName, ...args) => {
        console.log('Editor değişti:', eventName, ...args)
    });

    quill.on('image-upload', async (imageBlob) => {
        const formData = new FormData();
        formData.append('image', imageBlob);
        const response = await fetch('/api/upload', {
            method: 'POST',
            body: formData,
        });

        const data = await response.json();
        if (data.url) {
            quill.insertEmbed(quill.getSelection().index, 'image', data.url);
        }

    });



  }, []);

  return 
;
};

export default Editor;

Bu örnekte, /api/upload adresine bir POST isteği gönderilir. Sunucunuz bu isteği işleyip dosyayı kaydedip URL’yi döndürmelidir. Bu, gelişmiş bir örnek olup, hata yönetimi ve güvenlik önlemleri eklenmelidir. Daha detaylı örnekler ve farklı senaryolar için fatihsoysal.com adresindeki diğer yazılarımı inceleyebilirsiniz.

Sonuç

Bu makalede, React CMS’nizde Quill Editor ve resim yükleme işlevselliğini entegre etmenin temel adımlarını inceledik. Unutmayın ki bu, bir başlangıç noktasıdır ve projenizin özel gereksinimlerine göre özelleştirmeniz gerekebilir. Daha gelişmiş özellikler eklemek, hata yönetimi uygulamak ve güvenliği sağlamak için daha fazla kodlama ve konfigürasyon gerekebilir. Ancak, bu rehber size sağlam bir temel sağlayarak bu süreci kolaylaştıracaktır. Başarılar dilerim!

#Etiketler: React, Quill Editor, Resim Yükleme, CMS, JavaScript, API, Dosya Yükleme, Web Geliştirme, React CMS, Quill Resim Yükleme, Image Upload, React Uygulamaları