Dokumentasi Intlayer Visual Editor

Intlayer Visual Editor adalah alat yang akan membungkus situs web Anda untuk berinteraksi dengan file deklarasi konten Anda menggunakan editor visual.

Paket intlayer-editor didasarkan pada Intlayer dan tersedia untuk aplikasi JavaScript, seperti React (Create React App), Vite + React, dan Next.js.

Editor visual vs CMS

Editor Visual Intlayer adalah alat yang memungkinkan Anda mengelola konten Anda dalam editor visual untuk kamus lokal. Setelah perubahan dilakukan, konten akan digantikan dalam basis kode. Itu berarti aplikasi akan dibangun ulang dan halaman akan dimuat ulang untuk menampilkan konten baru.

Sebaliknya, Intlayer CMS adalah alat yang memungkinkan Anda mengelola konten Anda dalam editor visual untuk kamus jarak jauh. Setelah perubahan dilakukan, konten tidak akan memengaruhi basis kode Anda. Dan situs web akan secara otomatis menampilkan konten yang telah diubah.

Integrasikan Intlayer ke dalam aplikasi Anda

Untuk detail lebih lanjut tentang cara mengintegrasikan Intlayer, lihat bagian terkait di bawah ini:

Integrasi dengan Next.js

Untuk integrasi dengan Next.js, lihat panduan pengaturan.

Integrasi dengan Create React App

Untuk integrasi dengan Create React App, lihat panduan pengaturan.

Integrasi dengan Vite + React

Untuk integrasi dengan Vite + React, lihat panduan pengaturan.

Cara Kerja Intlayer Editor

Editor visual dalam sebuah aplikasi mencakup dua hal:

• Sebuah aplikasi frontend yang akan menampilkan situs web Anda dalam sebuah iframe. Jika situs web Anda menggunakan Intlayer, editor visual akan secara otomatis mendeteksi konten Anda, dan memungkinkan Anda untuk berinteraksi dengannya. Setelah modifikasi dilakukan, Anda akan dapat mengunduh perubahan Anda.

• Setelah Anda mengklik tombol unduh, editor visual akan mengirim permintaan ke server untuk mengganti file deklarasi konten Anda dengan konten baru (di mana pun file-file ini dideklarasikan dalam proyek Anda).

Perlu dicatat bahwa Intlayer Editor akan menulis file deklarasi konten Anda sebagai JSON jika ekstensi file adalah .json. Jika ekstensi file adalah .ts, .tsx, .js, .jsx, .mjs, .cjs, maka file akan ditulis sebagai file JavaScript menggunakan babel transformer.

Instalasi

Setelah Intlayer dikonfigurasi dalam proyek Anda, cukup instal intlayer-editor sebagai dependensi pengembangan:

npm install intlayer-editor --save-dev

Dengan flag --with, Anda dapat memulai editor secara paralel dengan perintah lain:

{  "scripts": {    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",  },}

Konfigurasi

Dalam file konfigurasi Intlayer Anda, Anda dapat menyesuaikan pengaturan editor:

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... pengaturan konfigurasi lainnya  editor: {    /**     * Wajib     * URL dari aplikasi.     * Ini adalah URL yang ditargetkan oleh editor visual.     * Contoh: 'http://localhost:3000'     */    applicationURL: process.env.INTLAYER_APPLICATION_URL,    /**     * Opsional     * Default sebagai `true`. Jika `false`, editor tidak aktif dan tidak dapat diakses.     * Dapat digunakan untuk menonaktifkan editor pada lingkungan tertentu demi alasan keamanan, seperti produksi.     */    enabled: process.env.INTLAYER_ENABLED,    /**     * Opsional     * Default sebagai `8000`.     * Port dari server editor.     */    port: process.env.INTLAYER_PORT,    /**     * Opsional     * Default sebagai "http://localhost:8000"     * URL dari server editor.     */    editorURL: process.env.INTLAYER_EDITOR_URL,  },};export default config;

Untuk melihat semua parameter yang tersedia, lihat dokumentasi konfigurasi.

Menggunakan Editor

1. Ketika editor sudah terpasang, Anda dapat memulai editor menggunakan perintah berikut:

   npx intlayer-editor start

   Perlu diperhatikan bahwa Anda harus menjalankan aplikasi Anda secara paralel. URL aplikasi harus sesuai dengan yang Anda atur dalam konfigurasi editor (applicationURL).

   Perlu diperhatikan bahwa perintah ini diekspor ulang oleh paket intlayer. Anda dapat menggunakan npx intlayer editor start sebagai gantinya.

2. Kemudian, buka URL yang disediakan. Secara default http://localhost:8000.

   Anda dapat melihat setiap field yang diindeks oleh Intlayer dengan mengarahkan kursor Anda ke konten.

   

3. Jika konten Anda diberi garis tepi, Anda dapat menekan lama untuk menampilkan laci edit.

Konfigurasi lingkungan

Editor dapat dikonfigurasi untuk menggunakan file lingkungan tertentu. Ini berguna ketika Anda ingin menggunakan file konfigurasi yang sama untuk pengembangan dan produksi.

Untuk menggunakan file lingkungan tertentu, Anda dapat menggunakan flag --env-file atau -f saat memulai editor:

npx intlayer-editor start -f .env.development

Perlu dicatat bahwa file lingkungan harus berada di direktori root proyek Anda.

Atau Anda dapat menggunakan flag --env atau -e untuk menentukan lingkungan:

npx intlayer-editor start -e development

Debug

Jika Anda mengalami masalah dengan visual editor, periksa hal-hal berikut:

• Visual editor dan aplikasi sedang berjalan.

• Konfigurasi editor sudah diatur dengan benar di file konfigurasi Intlayer Anda.

  • Field yang diperlukan:
    • URL aplikasi harus sesuai dengan yang Anda atur dalam konfigurasi editor (applicationURL).

• Visual editor menggunakan iframe untuk menampilkan situs web Anda. Pastikan Content Security Policy (CSP) situs web Anda mengizinkan URL CMS sebagai frame-ancestors ('http://localhost:8000' secara default). Periksa konsol editor untuk setiap kesalahan.