Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha
Ao integrar o servidor MCP Intlayer ao seu assistente de IA, você pode recuperar todos os documentos diretamente de ChatGPT, DeepSeek, Cursor, VSCode, etc.
Ver a documentação do servidor MCPO conteúdo desta página foi traduzido com uma IA.
Veja a última versão do conteúdo original em inglêsSe você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.
Link do GitHub para a documentaçãoCopiar o Markdown do documento para a área de transferência
Documentação do Editor Visual Intlayer
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
///chunkStart### 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:
Copiar o código para a área de transferência
npm install intlayer-editor --save-dev
Configuração
No arquivo de configuração do Intlayer, você pode personalizar as configurações do editor:
Copiar o código para a área de transferência
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
Quando o editor estiver instalado, você pode iniciá-lo usando o seguinte comando:
bashCopiar códigoCopiar 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).
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.
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:
Copiar o código para a área de transferência
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:
Copiar o código para a área de transferência
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).
- Campos obrigatórios:
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.
Histórico do Documento
- 5.5.10 - 2025-06-29: Histórico inicial