Tài liệu Trình chỉnh sửa trực quan Intlayer

Trình chỉnh sửa trực quan Intlayer là một công cụ bao bọc trang web của bạn để tương tác với các tệp khai báo nội dung của bạn bằng cách sử dụng trình chỉnh sửa trực quan.

Gói intlayer-editor được xây dựng dựa trên Intlayer và có sẵn cho các ứng dụng JavaScript, chẳng hạn như React (Create React App), Vite + React và Next.js.

Trình chỉnh sửa trực quan và CMS

Trình chỉnh sửa trực quan Intlayer là một công cụ cho phép bạn quản lý nội dung của mình trong trình chỉnh sửa trực quan dành cho các từ điển cục bộ. Khi có thay đổi được thực hiện, nội dung sẽ được thay thế trong code-base. Điều đó có nghĩa là ứng dụng sẽ được xây dựng lại và trang sẽ được tải lại để hiển thị nội dung mới.

Ngược lại, Intlayer CMS là một công cụ cho phép bạn quản lý nội dung trong trình chỉnh sửa trực quan dành cho các từ điển từ xa. Khi có sự thay đổi, nội dung sẽ không ảnh hưởng đến code-base của bạn. Và trang web sẽ tự động hiển thị nội dung đã thay đổi.

Tích hợp Intlayer vào ứng dụng của bạn

Để biết thêm chi tiết về cách tích hợp Intlayer, xem phần liên quan bên dưới:

Tích hợp với Next.js

Để tích hợp với Next.js, tham khảo hướng dẫn cài đặt.

Tích hợp với Create React App

Để tích hợp với Create React App, xem hướng dẫn cài đặt.

Tích hợp với Vite + React

Để tích hợp với Vite + React, xem hướng dẫn cài đặt.

Cách hoạt động của Intlayer Editor

Trình chỉnh sửa trực quan trong một ứng dụng bao gồm hai phần:

• Một ứng dụng frontend sẽ hiển thị trang web của bạn trong một iframe. Nếu trang web của bạn sử dụng Intlayer, trình chỉnh sửa trực quan sẽ tự động phát hiện nội dung của bạn và cho phép bạn tương tác với nó. Khi có sự thay đổi, bạn sẽ có thể tải xuống các thay đổi của mình.

• Khi bạn nhấn nút tải xuống, trình chỉnh sửa trực quan sẽ gửi một yêu cầu đến máy chủ để thay thế các tệp khai báo nội dung của bạn bằng nội dung mới (bất cứ nơi nào các tệp này được khai báo trong dự án của bạn).

Lưu ý rằng Intlayer Editor sẽ ghi các tệp khai báo nội dung của bạn dưới dạng JSON nếu phần mở rộng tệp là .json. Nếu phần mở rộng tệp là .ts, .tsx, .js, .jsx, .mjs, .cjs, nó sẽ ghi tệp dưới dạng tệp JavaScript sử dụng bộ biến đổi babel.

Cài đặt

Khi Intlayer đã được cấu hình trong dự án của bạn, chỉ cần cài đặt intlayer-editor như một phụ thuộc phát triển:

npm install intlayer-editor --save-dev

Với cờ --with, bạn có thể khởi động trình chỉnh sửa song song với một lệnh khác:

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

Cấu hình

Trong tệp cấu hình Intlayer của bạn, bạn có thể tùy chỉnh các thiết lập của trình chỉnh sửa:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... các thiết lập cấu hình khác
  editor: {
    /**
     * Bắt buộc
     * URL của ứng dụng.
     * Đây là URL mà trình chỉnh sửa trực quan sẽ nhắm tới.
     * Ví dụ: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * Tùy chọn
     * Mặc định là `true`. Nếu là `false`, trình chỉnh sửa sẽ không hoạt động và không thể truy cập được.
     * Có thể được sử dụng để vô hiệu hóa trình chỉnh sửa cho các môi trường cụ thể vì lý do bảo mật, chẳng hạn như môi trường production.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * Tùy chọn
     * Mặc định là `8000`.
     * Cổng của máy chủ trình chỉnh sửa.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * Tùy chọn
     * Mặc định là "http://localhost:8000"
     * URL của máy chủ trình chỉnh sửa.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Để xem tất cả các tham số có sẵn, tham khảo tài liệu cấu hình.

Sử dụng Trình chỉnh sửa

1. Khi trình chỉnh sửa được cài đặt, bạn có thể khởi động trình chỉnh sửa bằng lệnh sau:

   bash

   Sao chép nội dung

   Sao chép mã

   Sao chép đoạn mã vào khay nhớ tạm (clipboard)

   npx intlayer-editor start

   Lưu ý rằng bạn nên chạy ứng dụng của mình song song. URL của ứng dụng phải khớp với URL bạn đã thiết lập trong cấu hình trình chỉnh sửa (applicationURL).

   Lưu ý lệnh này được tái xuất bởi package intlayer. Bạn có thể sử dụng npx intlayer editor start thay thế.

2. Sau đó, mở URL được cung cấp. Mặc định là http://localhost:8000.

   Bạn có thể xem từng trường được Intlayer lập chỉ mục bằng cách di chuột qua nội dung của bạn.

3. Nếu nội dung của bạn được đánh dấu viền, bạn có thể nhấn giữ lâu để hiển thị ngăn chỉnh sửa.

Cấu hình môi trường

Trình chỉnh sửa có thể được cấu hình để sử dụng một tệp môi trường cụ thể. Điều này hữu ích khi bạn muốn sử dụng cùng một tệp cấu hình cho phát triển và sản xuất.

Để sử dụng một tệp môi trường cụ thể, bạn có thể sử dụng cờ --env-file hoặc -f khi khởi động trình chỉnh sửa:

npx intlayer-editor start -f .env.development

Lưu ý rằng tệp môi trường nên được đặt trong thư mục gốc của dự án của bạn.

Hoặc bạn có thể sử dụng cờ --env hoặc -e để chỉ định môi trường:

npx intlayer-editor start -e development

Gỡ lỗi

Nếu bạn gặp bất kỳ vấn đề nào với trình chỉnh sửa trực quan, hãy kiểm tra những điều sau:

• Trình chỉnh sửa trực quan và ứng dụng đang chạy.

• Cấu hình editor được thiết lập chính xác trong tệp cấu hình Intlayer của bạn.

  • Các trường bắt buộc:
    • URL ứng dụng nên khớp với URL bạn đã thiết lập trong cấu hình trình chỉnh sửa (applicationURL).

• Trình chỉnh sửa trực quan sử dụng iframe để hiển thị trang web của bạn. Đảm bảo rằng Chính sách Bảo mật Nội dung (CSP) của trang web cho phép URL CMS trong frame-ancestors (mặc định là 'http://localhost:8000'). Kiểm tra bảng điều khiển của trình chỉnh sửa để xem có lỗi nào không.