React CMS’de Quill Editor ve Resim Y\u00fckleme Entegrasyonu<\/p>\n
Merhaba! Fatih Soysal olarak, bu yaz\u0131da React tabanl\u0131 bir i\u00e7erik y\u00f6netim sistemine (CMS) Quill Editor’\u00fc entegre etmenin ve bu edit\u00f6r \u00fczerinden resim y\u00fckleme \u00f6zelli\u011fini nas\u0131l ekleyebilece\u011fimizi detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Quill, zengin metin d\u00fczenleme deneyimi sunan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesi. Bu entegrasyon, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n g\u00f6rsel a\u00e7\u0131dan zengin ve etkile\u015fimli i\u00e7erikler olu\u015fturmas\u0131n\u0131 sa\u011flayacakt\u0131r. \u00d6ncelikle, Quill Editor’\u00fcn temel \u00f6zelliklerini ve React ile olan uyumlulu\u011funu inceleyelim. Ard\u0131ndan, ad\u0131m ad\u0131m resim y\u00fckleme i\u015flevselli\u011fini nas\u0131l ekleyebilece\u011fimizi a\u00e7\u0131klayaca\u011f\u0131z. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 olacakt\u0131r.<\/p>\n
Quill’\u00fc React projenize dahil etmenin en kolay yolu, npm veya yarn paket y\u00f6neticilerini kullanmakt\u0131r. \u00d6ncelikle, projenize Quill ve Quill’\u00fcn gerekli mod\u00fcllerini y\u00fckleyin:<\/p>\n
\nnpm install quill quill-image-resize-module\n<\/code><\/pre>\nKurulumdan sonra, Quill’\u00fc React bile\u015feninizde kullanabilirsiniz. A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi, temel bir Quill Editor bile\u015feni g\u00f6stermektedir:<\/p>\n
\nimport React, { useRef, useEffect } from 'react';\nimport Quill from 'quill';\nimport 'quill\/dist\/quill.snow.css'; \/\/ veya quill.bubble.css\n\nconst Editor = () => {\n const editorRef = useRef(null);\n\n useEffect(() => {\n const quill = new Quill(editorRef.current, {\n modules: {\n toolbar: [\n ['bold', 'italic', 'underline'],\n ['image'],\n ['link']\n ]\n },\n theme: 'snow' \/\/ veya 'bubble'\n });\n }, []);\n\n return ;\n};\n\nexport default Editor;\n<\/code><\/pre>\nBu kod, basit bir Quill Editor \u00f6rne\u011fi sunmaktad\u0131r. Ancak, bu \u015fekilde resim y\u00fckleme i\u015flemi hen\u00fcz desteklenmemektedir. \u015eimdi, bu i\u015flemi nas\u0131l ekleyece\u011fimize bakal\u0131m.<\/p>\n
Resim Y\u00fckleme \u0130\u015flevselli\u011fini Ekleme<\/h2>\n
Quill’\u00fcn kendi resim y\u00fckleme \u00f6zelli\u011fi bulunmamaktad\u0131r. Bu nedenle, kendi resim y\u00fckleme mant\u0131\u011f\u0131m\u0131z\u0131 olu\u015fturmal\u0131y\u0131z. Bu, bir form, bir API u\u00e7 noktas\u0131 ve dosya y\u00fckleme i\u015flemini y\u00f6neten kod gerektirir. \u00d6rne\u011fin, bir bulut depolama hizmeti (AWS S3, Google Cloud Storage vb.) kullanabilir veya sunucuda bir dosya y\u00fckleme noktas\u0131 olu\u015fturabilirsiniz. Bu i\u015flem i\u00e7in, quill-image-resize-module mod\u00fcl\u00fcn\u00fc de kullanabiliriz, bu mod\u00fcl ile y\u00fckledi\u011fimiz resimlerin boyutlar\u0131n\u0131 da ayarlayabiliriz.<\/p>\n
\u00d6ncelikle, sunucuda resim y\u00fckleme i\u015flemini y\u00f6neten bir API u\u00e7 noktas\u0131na ihtiyac\u0131m\u0131z var. Bu u\u00e7 nokta, dosyay\u0131 al\u0131p depolayacak ve daha sonra Quill edit\u00f6r\u00fcne g\u00f6sterebilece\u011fimiz bir URL d\u00f6nd\u00fcrecektir. Sonras\u0131nda, Quill’in image mod\u00fcl\u00fcn\u00fc \u00f6zelle\u015ftirebilir ve kendi upload fonksiyonumuzu sa\u011flayabiliriz. Bu fonksiyon, dosyay\u0131 API u\u00e7 noktas\u0131na g\u00f6nderecek ve ald\u0131\u011f\u0131 URL’yi Quill edit\u00f6r\u00fcne ekleyecektir. A\u015fa\u011f\u0131da bu i\u015flemi g\u00f6steren basitle\u015ftirilmi\u015f bir \u00f6rnek mevcuttur. Bu \u00f6rnekte, dosya y\u00fckleme i\u015flemi sunucu tarafl\u0131 olarak ele al\u0131n\u0131yor ve sadece ba\u015far\u0131l\u0131 y\u00fckleme sonucu Quill edit\u00f6r\u00fcne yans\u0131t\u0131l\u0131yor.<\/p>\n
\nimport React, { useRef, useEffect, useState } from 'react';\nimport Quill from 'quill';\nimport 'quill\/dist\/quill.snow.css';\nimport ImageResize from 'quill-image-resize-module';\n\nconst Editor = () => {\n const editorRef = useRef(null);\n const [imageUploadUrl, setImageUploadUrl] = useState('');\n\n\n useEffect(() => {\n const quill = new Quill(editorRef.current, {\n modules: {\n toolbar: [\n ['bold', 'italic', 'underline'],\n ['image'],\n ['link']\n ],\n imageResize: {}\n },\n theme: 'snow'\n });\n quill.getModule('imageResize').enable();\n\n quill.on('text-change', (delta, oldDelta, source) => {\n \/\/Metin de\u011fi\u015fikliklerini izle\n });\n\n quill.on('selection-change', (range, oldRange, source) => {\n \/\/Se\u00e7imi izle\n });\n\n quill.on('editor-change', (eventName, ...args) => {\n console.log('Editor de\u011fi\u015fti:', eventName, ...args)\n });\n\n quill.on('image-upload', async (imageBlob) => {\n const formData = new FormData();\n formData.append('image', imageBlob);\n const response = await fetch('\/api\/upload', {\n method: 'POST',\n body: formData,\n });\n\n const data = await response.json();\n if (data.url) {\n quill.insertEmbed(quill.getSelection().index, 'image', data.url);\n }\n\n });\n\n\n\n }, []);\n\n return ;\n};\n\nexport default Editor;\n<\/code><\/pre>\n