createdAt	2025-09-07
updatedAt	2025-09-07
title	Intlayer Görsel Düzenleyici | İçeriğinizi görsel düzenleyici kullanarak düzenleyin
description	Çok dilli web sitenizi yönetmek için Intlayer Düzenleyici'yi nasıl kullanacağınızı keşfedin. Bu çevrimiçi dokümantasyondaki adımları takip ederek projenizi birkaç dakikada kurun.
keywords	Düzenleyici Uluslararasılaştırma Dokümantasyon Intlayer Next.js JavaScript React
slugs	doc concept editor
youtubeVideo	https://www.youtube.com/watch?v=UDDTnirwi_4
history	version date changes 5.5.10 2025-06-29 Geçmiş başlatıldı

Intlayer Görsel Düzenleyici Dokümantasyonu

<iframe title="Web Uygulamanız İçin Görsel Düzenleyici + CMS: Intlayer Açıklaması" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&origin=https://intlayer.org&controls=0&rel=1"/>

Intlayer Görsel Düzenleyici, web sitenizi bir iframe içine sararak içerik bildirim dosyalarınızla görsel düzenleyici kullanarak etkileşim kurmanıza olanak tanıyan bir araçtır.

intlayer-editor paketi Intlayer'a dayanır ve JavaScript uygulamaları için kullanılabilir, örneğin React (Create React App), Vite + React ve Next.js.

Görsel düzenleyici vs CMS

Intlayer Görsel düzenleyici, yerel sözlüklerinizde içeriğinizi görsel düzenleyici ile yönetmenizi sağlayan bir araçtır. Bir değişiklik yapıldıktan sonra, içerik kod tabanında değiştirilecektir. Bu, uygulamanın yeniden oluşturulacağı ve yeni içeriği görüntülemek için sayfanın yeniden yükleneceği anlamına gelir.

Buna karşılık, Intlayer CMS, uzak sözlüklerinizde içeriğinizi görsel düzenleyici ile yönetmenizi sağlayan bir araçtır. Bir değişiklik yapıldıktan sonra, içerik kod tabanınızı etkilemeyecektir. Ve web sitesi otomatik olarak değiştirilen içeriği görüntüleyecektir.

Intlayer'ı uygulamanıza entegre edin

Intlayer'ı entegre etme hakkında daha fazla detay için aşağıdaki ilgili bölüme bakın:

Next.js ile entegrasyon

Next.js ile entegrasyon için kurulum kılavuzuna bakın.

Create React App ile entegrasyon

Create React App ile entegrasyon için kurulum kılavuzuna bakın.

Vite + React ile entegrasyon

Vite + React ile entegrasyon için kurulum kılavuzuna bakın.

Intlayer Düzenleyici Nasıl Çalışır

Görsel düzenleyici, iki şeyi içeren bir uygulamadır:

• Web sitenizi bir iframe içinde görüntüleyecek bir ön uç uygulaması. Web siteniz Intlayer kullanıyorsa, görsel düzenleyici içeriğinizi otomatik olarak algılayacak ve onunla etkileşim kurmanıza izin verecektir. Bir değişiklik yapıldıktan sonra, değişikliklerinizi indirebileceksiniz.

• İndirme düğmesine tıkladığınızda, görsel düzenleyici sunucuya bir istek göndererek içerik bildirim dosyalarınızı yeni içerikle değiştirecektir (bu dosyalar projenizde nerede bildirilmiş olursa olsun).

Şimdilik, Intlayer Düzenleyici içerik bildirim dosyalarınızı JSON dosyaları olarak yazacaktır.

Kurulum

Intlayer projenizde yapılandırıldıktan sonra, intlayer-editor'ı geliştirme bağımlılığı olarak yükleyin:

npm install intlayer-editor --save-dev

yarn add intlayer-editor --save-dev

pnpm add intlayer-editor --save-dev

bun add intlayer-editor --dev

Yapılandırma

Intlayer yapılandırma dosyanızda düzenleyici ayarlarını özelleştirebilirsiniz:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... diğer yapılandırma ayarları
  editor: {
    /**
     * Gerekli
     * Uygulamanın URL'si.
     * Bu, görsel düzenleyici tarafından hedeflenen URL'dir.
     * Örnek: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * İsteğe bağlı
     * Varsayılan olarak `true`. Eğer `false` ise, düzenleyici etkin değildir ve erişilemez.
     * Güvenlik nedeniyle üretim gibi belirli ortamlar için düzenleyiciyi devre dışı bırakmak için kullanılabilir.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * İsteğe bağlı
     * Varsayılan olarak `8000`.
     * Düzenleyici sunucusunun portu.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * İsteğe bağlı
     * Varsayılan olarak "http://localhost:8000"
     * Düzenleyici sunucusunun URL'si.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Kullanılabilir tüm parametreleri görmek için yapılandırma dokümantasyonuna bakın.

Düzenleyiciyi Kullanma

1. Düzenleyici yüklendiğinde, düzenleyiciyi aşağıdaki komutla başlatabilirsiniz:

   npx intlayer-editor start

   yarn intlayer-editor start

   pnpm intlayer-editor start

   Uygulamanızı paralel olarak çalıştırmanız gerektiğini unutmayın. Uygulama URL'si düzenleyici yapılandırmasında ayarladığınızla eşleşmelidir (applicationURL).

2. Ardından, sağlanan URL'yi açın. Varsayılan olarak http://localhost:8000.

   İmlecinizi içeriğinizin üzerine getirerek Intlayer tarafından indekslenen her alanı görüntüleyebilirsiniz.

   

3. İçeriğinizin ana hatları varsa, düzenleme çekmecesini görüntülemek için uzun basın.

Ortam yapılandırması

Düzenleyici belirli bir ortam dosyasını kullanacak şekilde yapılandırılabilir. Bu, geliştirme ve üretim için aynı yapılandırma dosyasını kullanmak istediğinizde yararlıdır.

Düzenleyiciyi başlatırken belirli bir ortam dosyası kullanmak için --env-file veya -f bayrağını kullanabilirsiniz:

npx intlayer-editor start -f .env.development

yarn intlayer-editor start -f .env.development

pnpm intlayer-editor start -f .env.development

Ortam dosyasının projenizin kök dizininde bulunması gerektiğini unutmayın.

Veya ortamı belirtmek için --env veya -e bayrağını kullanabilirsiniz:

npx intlayer-editor start -e development

yarn intlayer-editor start -e development

pnpx intlayer-editor start -e development

Hata ayıklama

Görsel düzenleyici ile herhangi bir sorunla karşılaşırsanız, aşağıdakileri kontrol edin:

• Görsel düzenleyici ve uygulama çalışıyor.

• Intlayer yapılandırma dosyanızda editor yapılandırması doğru şekilde ayarlandı.

  • Gerekli alanlar:
    • Uygulama URL'si düzenleyici yapılandırmasında ayarladığınızla eşleşmelidir (applicationURL).

• Görsel düzenleyici web sitenizi görüntülemek için bir iframe kullanır. Web sitenizin İçerik Güvenlik Politikası'nın (CSP) CMS URL'sini frame-ancestors olarak izin verdiğinden emin olun (varsayılan olarak 'http://localhost:8000'). Herhangi bir hata için düzenleyici konsolunu kontrol edin.