Documentação do Editor Visual Intlayer

www.youtube.com

Open embedded page in fullscreen

O Editor Visual Intlayer é uma ferramenta que envolverá seu site para interagir com seus arquivos de declaração de conteúdo usando um editor visual.

O pacote intlayer-editor é baseado no Intlayer e está disponível para aplicações JavaScript, como React (Create React App), Vite + React e Next.js.

Editor visual vs CMS

O Editor Visual Intlayer é uma ferramenta que permite gerenciar seu conteúdo em um editor visual para dicionários locais. Uma vez feita uma alteração, o conteúdo será substituído na base de código. Isso significa que a aplicação será reconstruída e a página será recarregada para exibir o novo conteúdo.

Em contraste, o Intlayer CMS é uma ferramenta que permite gerenciar seu conteúdo em um editor visual para dicionários remotos. Uma vez feita uma alteração, o conteúdo não impactará sua base de código. E o site exibirá automaticamente o conteúdo alterado.

Integrar o Intlayer na sua aplicação

Para mais detalhes sobre como integrar o Intlayer, consulte a seção relevante abaixo:

Integração com Next.js

Para integração com Next.js, consulte o guia de configuração.

Integração com Create React App

Para integração com Create React App, consulte o guia de configuração.

Integração com Vite + React

Para integração com Vite + React, consulte o guia de configuração.

Como o Editor Intlayer Funciona

O editor visual em uma aplicação inclui duas coisas:

• Uma aplicação frontend que exibirá seu site em um iframe. Se seu site usar o Intlayer, o editor visual detectará automaticamente seu conteúdo e permitirá que você interaja com ele. Uma vez feita uma modificação, você poderá baixar suas alterações.

• Após clicar no botão de download, o editor visual enviará uma solicitação ao servidor para substituir seus arquivos de declaração de conteúdo pelo novo conteúdo (onde quer que esses arquivos estejam declarados em seu projeto).

Observe que, por enquanto, o Editor Intlayer gravará seus arquivos de declaração de conteúdo como arquivos JSON.

Instalação

Depois que o Intlayer estiver configurado em seu projeto, basta instalar o intlayer-editor como uma dependência de desenvolvimento:

npm install intlayer-editor --save-dev

Com a flag --with, você pode iniciar o editor em paralelo com outro comando:

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

Configuração

No arquivo de configuração do Intlayer, você pode personalizar as configurações do editor:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... outras configurações
  editor: {
    /**
     * Obrigatório
     * A URL da aplicação.
     * Esta é a URL alvo do editor visual.
     * Exemplo: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * Opcional
     * Padrão como `true`. Se `false`, o editor está inativo e não pode ser acessado.
     * Pode ser usado para desativar o editor em ambientes específicos por razões de segurança, como produção.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * Opcional
     * Padrão como `8000`.
     * A porta do servidor do editor.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * Opcional
     * Padrão como "http://localhost:8000"
     * A URL do servidor do editor.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

Para ver todos os parâmetros disponíveis, consulte a documentação de configuração.

Usando o Editor

1. Quando o editor estiver instalado, você pode iniciá-lo usando o seguinte comando:

   bash

   Copiar conteúdo

   Copiar código

   Copiar o código para a área de transferência

   npx intlayer-editor start
   

   Observe que você deve executar sua aplicação em paralelo. A URL da aplicação deve corresponder à que você configurou no editor (applicationURL).

Nota que o comando é reexportado pelo pacote intlayer. Você pode usar npx intlayer editor start em vez disso.

2. Em seguida, abra a URL fornecida. Por padrão http://localhost:8000.

   Você pode visualizar cada campo indexado pelo Intlayer passando o cursor sobre seu conteúdo.

   

3. Se o seu conteúdo estiver destacado, você pode pressioná-lo por um longo tempo para exibir a gaveta de edição.

Configuração do ambiente

O editor pode ser configurado para usar um arquivo de ambiente específico. Isso é útil quando você deseja usar o mesmo arquivo de configuração para desenvolvimento e produção.

Para usar um arquivo de ambiente específico, você pode usar a flag --env-file ou -f ao iniciar o editor:

npx intlayer-editor start -f .env.development

Observe que o arquivo de ambiente deve estar localizado no diretório raiz do seu projeto.

Ou você pode usar a flag --env ou -e para especificar o ambiente:

npx intlayer-editor start -e development

Depuração

Se você encontrar problemas com o editor visual, verifique o seguinte:

• O editor visual e a aplicação estão em execução.

• As configurações do editor estão corretamente definidas no arquivo de configuração do Intlayer.

  • Campos obrigatórios:
    • A URL da aplicação deve corresponder à que você configurou no editor (applicationURL).

• O editor visual usa um iframe para exibir seu site. Certifique-se de que a Política de Segurança de Conteúdo (CSP) do seu site permita a URL do CMS como frame-ancestors (http://localhost:8000 por padrão). Verifique o console do editor para quaisquer erros.

Perguntas Frequentes