Editor WYSIWYG avançado

O editor WYSIWYG avançado combina design leve com poderosas capacidades de edição de texto enriquecido, suportando sintaxe específica do Markdown. Ele oferece uma experiência altamente visual e intuitiva que supera os editores tradicionais do Markdown, mas mantém mais flexibilidade do que os editores WYSIWYG.

ATENÇÃO

Os artigos que foram trocados do editor Markdown ou WYSIWYG para o editor WYSIWYG Avançado não podem ser revertidos.

Explorando o editor avançado WYSIWYG

Usando o editor Advanced WYSIWYG

Atribuição de um nome de artigo

Quando você cria um artigo, você fornece um nome para ele. No editor Advanced WYSIWYG, o título do artigo aparece no topo da área de conteúdo do artigo. Clique no título para editar. Você verá as seguintes opções:

Sugira título:

1. A Eddy AI sugere três opções de título para o seu artigo. Selecione o título desejado e edite conforme necessário.

2. Clique em Gerar mais sugestões para ver opções adicionais de título.

3. Use os botões curtir () e não curtir () para dar feedback sobre as sugestões da Eddy AI.

URL & Descrição:

1. URL: Edite a URL do artigo neste campo. Por padrão, o Document360 cria a URL (também conhecida como slug) com base no título do artigo no momento da criação. Por exemplo, se o título do artigo for "O que é Document360?", a URL se torna what-is-document360.

   NOTA

   Para mais informações, leia o artigo sobre Change the URL of an article.

2. Descrição: Insira uma breve descrição do artigo.

NOTA

Para editar metadados de artigos como SEO settings, search visibility, tags, labels, related articles featured image, attachments, , status indicator, preferences, ou deprecation, clique no ícone Mais (⋯) no canto superior direito do editor e então selecione Mais opções de artigo.

Você pode usar o menu Quick insert , o comando de barra e a sintaxe específica do Markdown para criar e editar conteúdo no editor avançado WYSIWYG.

Menu rápido de inserção

O menu Quick insert aparece como uma opção flutuante dentro de um bloco vazio. Ele permite que os usuários adicionem rapidamente elementos comumente usados em seus artigos.

As opções disponíveis no menu Quick insert são:

• Eddy AI Writer (): Gere conteúdo alimentado por IA diretamente no seu artigo.

• Lista de tópicos (): Insira uma lista com tópicos. Use o menu suspenso para selecionar padrão, disco, quadrado ou círculo.

• Tabela (): Adicione uma tabela para estruturar os dados.

• Imagem (): Faça upload e insira uma imagem.

  NOTA

  • Use as ferramentas disponíveis para formatar a imagem. Clique na imagem para abrir o menu de formatação flutuante.

  • Você pode alinhar, recortar, adicionar bordas, sombras, legendas e muito mais.

    Para mais informações, leia o artigo sobre Image formatting in the Advanced WYSIWYG editor.

• Link (): Adicione um hiperlink. Você também pode usar o Ctrl + K atalho de teclado.

• Bloco de código (): Insira um bloco de código para conteúdo técnico. Clique dentro do bloco de código para acessar a barra de ferramentas contextual:

  • Menu suspenso de idioma: Selecione o idioma desejado

  • Cópia: Para copiar o bloco de código

• Mais: Clique em Mais para acessar opções adicionais de formatação usando o menu Barra.

NOTA

• O menu Inserção Rápida aparece apenas quando o bloco está vazio.

• Ele desaparece automaticamente quando você começa a digitar.

• Se você limpar o conteúdo em um bloco, o menu Inserção Rápida reaparece.

Comece a escrever com Eddy AI, escolha um template e importe documentação

Quando o artigo no editor Advanced WYSIWYG estiver vazio, você pode começar a criar seu conteúdo usando as seguintes opções:

um. Comece a escrever com Eddy AI

1. Clique em Começar a escrever com Eddy AI.

2. Selecione uma das opções disponíveis:

   1. Escreva Artigo

   2. Criar um esboço do artigo

   3. Criar um artigo a partir de vídeo

   4. Criar artigo a partir da transcrição da mídia ou arquivo de texto

3. Insira o prompt ou tema desejado.

   A IA gerará um rascunho inicial baseado nas opções selecionadas e nas informações fornecidas.

NOTA

Para mais informações, leia o artigo sobre AI Writer.

b. Escolha um modelo

1. Clique em Escolher um modelo.

   Um painel aparecerá com os modelos disponíveis.

2. Selecione o modelo desejado e pré-visualize.

3. Clique em Use este  modelo paraestruturar seu artigo com conteúdo pré-definido.

   O nome e o slug do artigo serão preenchidos automaticamente usando o título do modelo.

NOTA

Para mais informações, leia o artigo sobre Templates.

C. Documento de importação

1. Clique em Importar documento.

   O painel de Importação vai aparecer.

2. Faça upload de um .docx arquivo usando arrastar e soltar ou faça upload de um  arquivo oude uma opção.

   O nome do artigo e o slug serão gerados automaticamente com base no nome do arquivo carregado.

NOTA

• As opções de Começar a escrever com Eddy AI, Escolher um modelo e Importar documentos aparecerão de forma proeminente quando o editor de artigos estiver vazio.

• Quando você começa a digitar manualmente, as opções desaparecem.

• Se você limpar o conteúdo no editor, essas opções reaparecem para fácil acesso.

Comandos de barra

Digite / no editor, uma lista de opções aparece. Você também pode pesquisar pelas opções digitando os nomes dos comandos. Clique no comando desejado ou pressione a tecla Enter para selecionar o comando.

NOTA

Certifique-se de digitar / no início de uma linha ou após um espaço. As opções não aparecem se você digitar imediatamente após um personagem. Você pode navegar por cada comando e seção usando as teclas de seta para cima, baixo, direita e esquerda.

Você também pode acessar facilmente o Eddy AI Writer diretamente do topo do menu de barras. Além disso, as opções do comando de barra são categorizadas em três seções:

NOTA

Tabelas

Ao selecionar /table no menu com barra, um submenu aparece com uma paleta em grade:

• A seleção padrão é uma 3 × 3 tabela.

• Você pode inserir até uma 10 × 10 mesa usando a paleta.

• Use as teclas do teclado ou do mouse paramodificar a seleção.

• Após a criação da tabela, você pode adicionar mais linhas e colunas usando o ícone + . Para mais informações, leia o Tables in Advanced WYSIWYG editorarquivo .

Divisores

Ao selecionar /divider no menu com barra, aparece um submenu mostrando três estilos de divisória:

• Sólido (padrão)

• Pontilhado

• Dashed

Sintaxe Markdown

O editor avançado WYSIWYG suporta uma ampla variedade de sintaxes Markdown; para uma lista detalhada, leia o artigo sobre os conceitos básicos do Markdown.

Por exemplo, se você quiser adicionar um Cabeçalho 2, digite a seguinte sintaxe: ## Markdown syntax. A sintaxe será renderizada e o Cabeçalho 2 será adicionado instantaneamente.

NOTA

• A sintaxe do Markdown só funciona quando você digita manualmente. Ela não será renderizada quando você copiar e colar a sintaxe.

• Para ver a lista de sintaxe Markdown não suportada, leia o artigo sobre Advanced WYSIWYG editor basics.

Barra de Ferramentas

Para alterar o layout ou a aparência do conteúdo, use as opções de formatação avançadas do editor Advanced WYSIWYG.

Ao editar no editor WYSIWYG Avançado, clique no ícone Formatar () no lado direito do painel do editor.

NOTA

Ao selecionar a opção Pin (), você pode ancorar a barra de ferramentas no lado direito da interface do editor. Quando a barra de ferramentas é fixada, a árvore de categorias permanece expandida enquanto você navega entre artigos, facilitando a troca entre eles sem expandir a árvore de categorias a cada vez, mantendo a barra de formatação fixada no editor.

Em telas menores (abaixo de 1280 px), a árvore de categorias colapsa automaticamente quando você alterna entre artigos.

1. Estilos de texto

• Desfazer (): Para reverter a última ação.

• Refazer (): Para reaplicar a última ação desfeita.

• Format painter (): Para copiar e aplicar formatação de uma parte do texto para outra.

• Clear (): Para remover todo o estilo do texto selecionado.

• Lettercase (): Para mudar a letra maiúscula do texto.

2. Títulos

• : Para aplicar o estilo H2 (Cabeçalho 2) ao texto selecionado.

• : Para aplicar o estilo H3 (Cabeçalho 3) ao texto selecionado.

• : Para aplicar o estilo H4 (Cabeçalho 4) ao texto selecionado.

• Parágrafo (): Para aplicar o estilo padrão de parágrafo ao texto selecionado.

3. Tipografia

• Família de fontes: Para selecionar a fonte do texto.

• Tamanho da fonte: Para ajustar o tamanho do texto selecionado.

NOTA

Quando você insere o conteúdo no editor Advanced WYSIWYG, o tipo de fonte será definido como Verdana por padrão.

• Para mudar as configurações de fonte em toda a sua base de conhecimento, navegue até Configurações () na barra de navegação esquerda.

• No painel de navegação à esquerda, navegue até Site da base de conhecimento > Customize site.

• No menu suspenso Fonte do Site , selecione a fonte desejada.

4. Paleta

• Cor da fonte: Para mudar a cor do texto selecionado.

• Cor de fundo: Para definir uma cor de fundo para o texto selecionado.

5. Formatação e Listas

• Negrito (): Para colocar negrito o texto selecionado.

• Itálico (): Para colocar itálico no texto selecionado.

• Sublinhar (): Para sublinhar o texto selecionado.

• Riscar (): Para aplicar um risco ao texto selecionado.

• Inline code (): Para adicionar código inline ao texto.

• Alinhar à esquerda (): Para alinhar o conteúdo do texto com a margem esquerda.

• Centralizar (): Para centralizar seu conteúdo de texto.

• Alinhar à direita (): Para alinhar o conteúdo do texto com a margem direita.

• Justificar (): Para distribuir o conteúdo do texto de forma uniforme entre as margens.

• Lista de tópicos (): Para adicionar uma lista denotada com símbolos para cada item.

• Lista numerada (): Para adicionar uma lista denotada com numeração para cada item.

• Lista de numeração multinível (): Para adicionar uma lista denotada com numeração multinível para cada item.

• Lista de verificação (): Para adicionar uma lista indicada com caixas de seleção que os usuários podem marcar como completa ou incompleta.

6. Controles

• Aumentar o recuo (): Para afastar o conteúdo da margem.

• Diminua o recuo (): Para aproximar o conteúdo da margem.

• Índice (): Para baixar o texto abaixo da linha de base.

• Spíceps (): Para elevar o texto acima da linha de base.

• Altura da linha (): Para escolher o espaçamento entre as linhas.

• Espaço de letras (): Para alterar o espaçamento entre as letras.

• Quebra de linha (): Para mudar para a linha seguinte.

• Quebra de página (): Para especificar onde terminar a página atual e começar a próxima página enquanto exporta o conteúdo como PDF.

DICA PROFISSIONAL

Para alterar o nível da sua lista com pontos ou numerada, você pode usar os controles Aumentar indentação () ou Diminuir recuo () na barra de ferramentas. Alternativamente, use os atalhos de teclado Tab para aumentar o recuo ou Shift+Tab para diminuir o recuo.

Encontre e substitua

Para usar o recurso Encontrar e Substituir no editor avançado WYSIWYG:

1. Clique no ícone More () no canto superior direito.

2. Selecione , Encontrar e substituir no menu.

NOTA

Para mais informações, leia o artigo sobre Find and replace.

Inserindo modelos de FAQ no editor avançado WYSIWYG

Para inserir modelos de FAQ no editor avançado WYSIWYG:

1. Navegue até o local desejado no artigo.  

2. Digite o comando /FAQs Slash e selecione as perguntas frequentes da lista.

   O Document360 adiciona três modelos de acordeão de perguntas frequentes ao seu artigo.

3. Nos modelos de FAQ inseridos, você pode realizar as seguintes opções:

   1. Configurações (): Clique para personalizar os modelos de FAQ de acordo com suas preferências.

   2. Expandir/Colapsar (): Clique para expandir ou colapsar os acordeões de FAQ.

   3. Excluir (): Clique para remover toda a seção de FAQ.

   4. Adicionar pergunta (): Clique entre as FAQs para inserir FAQs personalizadas adicionais.

NOTA

• Os modelos de FAQs são diferentes do gerador de FAQ de IA.

• Para mais informações, leia o artigo AI FAQ generator.

Visão de código ()

• Permite visualizar e editar o conteúdo em formato de código HTML.

• Quando você muda para a visualização de código, o editor formata automaticamente o HTML para melhor legibilidade. Essa formatação padroniza a indentação e o espaçamento sem alterar a estrutura HTML subjacente.

• A formatação automática é executada toda vez que você entra na visão de código. Blocos personalizados de HTML e script não são afetados, e a formatação não é aplicada durante o save ou publicação.

• Mudar para a Visualização de Código permite adicionar elementos HTML personalizados, aplicar estilos inline ou fazer ajustes precisos.

• Use Ctrl + F para realizar uma busca persistente na visualização de código:

  • Pressione Enter para navegar até a próxima ocorrência do termo de busca.

  • Pressione Shift + Enter para navegar até a ocorrência anterior.

• No painel de visualização de código , o Mais ícone () está desativado.

NOTA

• Você deve clicar no botão Salvar para salvar as alterações feitas na visualização de código.

• Lista Ordenada e Não Ordenada deixa de ser ordenada sequencial.

• Tipos de listas aninhadas não são suportados nos seguintes cenários:

  • Quando o conteúdo é copiado e colado.

  • Em certos cenários de migração de conteúdo.

Adicionando um comentário inline no editor avançado WYSIWYG

1. Navegue até o artigo desejado no portal da Base de Conhecimento.

2. Selecione o texto desejado para adicionar um comentário, e um menu flutuante aparecerá.

3. Clique no ícone de Comentário () no menu flutuante.

4. Use ferramentas básicas de formatação, como negrito e listas. Além disso, use o símbolo @ para mencionar os membros da equipe do projeto, se necessário.

5. Depois de terminar, clique no ícone Enviar ().

NOTA

Para desativar esse modo, navegue até o portal da Base de Conhecimento, Documentação () na barra de navegação esquerda.

No painel de navegação à esquerda, navegue até ferramentas de conteúdo > designer de fluxo de trabalho. Passe o mouse sobre o status desejado, clique no ícone Editar (✎) e desative a opção de apenas leitura .

Para ver todos os comentários em um artigo:

1. Navegue até o artigo desejado.

2. Clique no ícone de Comentário () localizado no lado direito, próximo ao botão de publicar.

3. O painel de Comentários aparecerá. Use o menu suspenso no topo para filtrar as opções, como Todos os comentários, comentários mencionados, comentários abertos e comentários resolvidos.

Aqui, você pode responder aos comentários.

NOTA

Para informações, leia o artigo sobre Reviewing an article using Inline comments

Usando listas numeradas e multinível no editor Advanced WYSIWYG

No editor avançado WYSIWYG, você pode adicionar tanto listas numeradas quanto listas multinível para organizar seu conteúdo de forma eficaz.

Criação de uma lista numerada

Você pode criar uma lista numerada usando um dos seguintes métodos:

Método 1:
Digite qualquer um dos seguintes seguido de um espaço, conforme seu requisito:
1., a., A., i., I., (α)., 1), , a), ou i)

Método 2:
Use o comando de corte (/):

• /numbered list – para adicionar uma lista numerada. Passe o mouse sobre a lista numerada no menu com barras para ver as opções disponíveis da lista.

• /multi-level list – para adicionar uma lista multinível. Passe o mouse sobre a lista Multi-nível no menu com barras para ver a lista de opções de listas multi-nível.

Método 3:

• Selecione o conteúdo desejado e pressione Ctrl + Shift + O ou Ctrl + Shift + 7.

• Por padrão, a lista numerada começa com 1., 2., 3., e assim por diante.

Estilos de lista disponíveis

Formatos de lista numerada

Os seguintes estilos de lista numerada estão disponíveis:

Formatos de lista multinível

Você pode escolher entre quatro tipos de listas multinível:

Format painter no editor avançado WYSIWYG

O Format painter no Document360 ajuda você a copiar e aplicar rapidamente a formatação de texto de uma seção para outra, economizando tempo e garantindo consistência em todo o seu conteúdo.

Você pode acessar o Format painter a partir dos seguintes locais no editor Advanced WYSIWYG:

• Menu de formato

• Menu de bolhas que aparece quando você seleciona texto

Usando o Format Painter

Para usar o Format Painter:

1. No editor avançado WYSIWYG, selecione o texto de origem cuja formatação você deseja copiar.

2. Clique no ícone Formatar Pintor () no menu de formatação ou bolha.

3. O cursor muda para um ícone de pincel, indicando que o Formatar está ativo.

4. Aplique a formatação copiada por:

   • Clicar em uma palavra ou letra do texto alvo (aplica-se apenas à palavra inteira).

   • Arrasto o mouse para destacar uma seleção.

   • Selecionando um bloco inteiro de texto.

Uma vez aplicada a formatação ou cancelado o Format Painter, o cursor retorna ao normal.

Formatação que será copiada

Apenas a formatação em nível de texto será copiada. Isso inclui:

• Tipo, tamanho e cor da fonte

• Negrito, Itálico, Sublinhado, Riscado

• Espaçamento entre letras

• Cor de fundo (destaque)

NOTA

• Para títulos, a tag de cabeçalho também será copiada, mas somente se o bloco inteiro for selecionado.

• O estilo copiado é baseado no primeiro caractere do texto de origem selecionado.

Cancelando o Formato Painter

O Format painter será desativado se você:

• Clique em qualquer lugar fora do editor.

• Pressione Esc.

• Realize qualquer outra ação no editor ou no painel.

• Clique no ícone ativo do Formatar no menu Formatar.

NOTA

• Pressione Ctrl + Z ou clique no ícone Desfazer () no menu Formatar para desfazer a formatação aplicada.

• Pressione Alt + Shift + V ou clique no ícone Limpar () no menu Formatar para limpar a formatação do texto selecionado.

Atalhos de teclado para o Format Painter

Os atalhos de teclado para usar o Format Painter são:

Escolhas de formatação para colagem do Microsoft Word

Ao colar conteúdo do Microsoft Word, você pode manter ou limpar a formatação, incluindo elementos como listas, tabelas, recuos e fontes.

1. Clique em Colar com a formatação para manter o formato do conteúdo do Microsoft Word.

2. Clique em Colar como texto simples para limpar o formato do conteúdo do Microsoft Word.

Solução de problemas

Não foi possível editar a seção do artigo devido a tags HTML não suportadas

Esse problema ocorre quando um artigo é convertido do editor WYSIWYG para o editor Advanced WYSIWYG, resultando em tags HTML não suportadas.

Passos para resolver:

1. Para evitar isso, evite converter artigos do editor WYSIWYG padrão para o editor WYSIWYG Avançado.

2. Em vez disso, importe ou copie e cole conteúdo diretamente no editor Advanced WYSIWYG para evitar problemas de formatação.

3. Se o problema já ocorreu, revise a visualização de código do artigo e remova quaisquer tags HTML não suportadas. Essas etiquetas normalmente são envoltas dentro da <editor360-custom-block> etiqueta. Remover essa tag restaurará a funcionalidade de edição e resolverá o problema.

.onehope {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: smaller;
    background-color: white;
}
.onehope .onehope_left {
    flex: 1;
    margin-right: 0.5vw;
    margin-top: 25px;
    margin-left: 0.2vw;
    text-align: justify;
}
.onehope .onehope_right {
    flex: 1;
    margin-right: 0vw;
    margin-left: 1vw;
    max-width: 30%;
    text-align: justify;
} 

<div class="onehope">
    <div class="onehope_left">
        <h3>How to reset your password</h3>
        <p>If you forget your password, click <b>Forgot Password</b> on the login page. 
        Enter your registered email, and you’ll receive a password reset link.</p>
    </div>
    <div class="onehope_right">
        <h4>Tip</h4>
        <p>For better security, choose a password with at least 8 characters, 
        including numbers and special symbols.</p>
    </div>
</div>