Editor WYSIWYG avançado

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

CUIDADO

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

Explorando o editor WYSIWYG avançado

Usando o editor WYSIWYG avançado

Atribuindo um nome de artigo

Ao criar um artigo, você fornece um nome para ele. No editor WYSIWYG avançado, o título do artigo aparece na parte superior da área de conteúdo do artigo. Clique no título para editá-lo. Você verá as seguintes opções:

Sugerir título:

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

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

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

URL & Descrição:

1. URL: Edite o 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 é o Document360?", a URL se tornará what-is-document360.

   NOTA

   Para obter 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, related articlesattachmentspreferencesfeatured imagelabelsstatus indicatorou deprecation, clique no ícone Mais (⋯) no canto superior direito do editor e selecione Mais opções de artigo.

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

Menu de inserção rápida

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

As opções disponíveis no menu Inserção rápida são:

• Eddy AI Writer (): Gere conteúdo com inteligência artificial diretamente em seu artigo.

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

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

• Imagem (): Carregue 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, cortar, adicionar bordas, adicionar sombras, adicionar legendas e muito mais.

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

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

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

  • Menu suspenso Idioma: Selecione o idioma desejado

  • Copiar: Para copiar o bloco de código

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

NOTA

• O menu Inserção rápida aparece somente 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 será exibido novamente.

Comece a escrever com o Eddy AI, escolha um modelo e importe documentos

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

um. Comece a escrever com o Eddy AI

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

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

   1. Escrever artigo

   2. Criar esboço do artigo

   3. Criar artigo a partir de vídeo

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

3. Insira o prompt ou tópico desejado.

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

NOTA

Para obter 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 visualize-o.

3. Clique em Usar este  modelo paraestruturar seu artigo com conteúdo predefinido.

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

NOTA

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

C. Documento de importação

1. Clique em Importar documento.

   O painel Importar será exibido.

2. Carregue um .docx arquivo usando arrastar e soltar ou faça upload de um  arquivo oposição.

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

NOTA

• As opções Comece a escrever com o Eddy AI, Escolha um modelo e Importar documentos aparecerá com destaque quando o editor de artigos estiver vazio.

• Depois de começar a digitar manualmente, as opções desaparecem.

• Se você limpar o conteúdo no editor, essas opções reaparecerão para facilitar o acesso.

Comandos de barra

Digite / no editor, uma lista de opções aparecerá. Você também pode pesquisar as 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 depois de um espaço. As opções não aparecerão se você digitá-lo imediatamente após um caractere. Você pode navegar por cada comando e seção em comandos de barra usando as teclas de seta para cima, para baixo, para a direita e para a esquerda.

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

NOTA

Tabelas

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

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

• Você pode inserir até uma 10 × 10 tabela 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 obter mais informações, leia o Tables in Advanced WYSIWYG editor.

Divisores

Ao selecionar /divider no menu de barra, um submenu aparece mostrando três estilos de divisor:

• Sólido (padrão)

• Pontilhado

• Tracejado

Sintaxe de Markdown

O editor WYSIWYG avançado suporta uma ampla variedade de sintaxes Markdown; para obter uma lista detalhada, leia o artigo sobre Noções básicas de Markdown.

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

NOTA

• A sintaxe Markdown só funcionará quando você digitá-la manualmente. Ele não será renderizado quando você copiar e colar a sintaxe.

• Para exibir a lista de sintaxe Markdown sem suporte, 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çada do editor WYSIWYG avançado.

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

NOTA

Ao selecionar a opção Fixar (), você pode ancorar a barra de ferramentas no lado direito da interface do editor. Quando a barra de ferramentas estiver fixada, a árvore de categorias permanecerá expandida à medida que você navega entre os artigos, facilitando a alternância entre eles sem expandir a árvore de categorias a cada vez, mantendo a barra de ferramentas de formatação fixada no editor.

Em telas menores (abaixo de 1280 px), a árvore de categorias será recolhida automaticamente quando você alternar entre os artigos.

1. Estilos de texto

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

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

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

• Limpar (): para remover todos os estilos do texto selecionado.

• Lettercase (): Para alterar as letras maiúsculas e minúsculas do texto.

2. Títulos

• : Para aplicar o estilo H2 (Título 2) ao texto selecionado.

• : Para aplicar o estilo H3 (Título 3) ao texto selecionado.

• : Para aplicar o estilo H4 (Título 4) ao texto selecionado.

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

3. Tipografia

• Família de fontes: para selecionar o tipo de letra do texto.

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

NOTA

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

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

• No painel de navegação esquerdo, 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 alterar 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 o texto selecionado em negrito.

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

• Sublinhado (): para sublinhar o texto selecionado.

• Tachado (): Para aplicar um tachado ao texto selecionado.

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

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

• Centralizar (): para centralizar o conteúdo do texto.

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

• Justificar (): para distribuir o conteúdo do texto uniformemente entre as margens.

• Lista de marcadores (): Para adicionar uma lista indicada com símbolos para cada item.

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

• Lista de numeração de vários níveis (): Para adicionar uma lista indicada com numeração de vários níveis para cada item.

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

6. Controles

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

• Diminuir recuo (): para mover o conteúdo para mais perto da margem.

• Subscrito (): Para abaixar o texto abaixo da linha de base.

• Sobrescrito (): para elevar o texto acima da linha de base.

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

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

• Quebra de linha (): Para alternar 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 PRO

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

Localizar e substituir

Para usar o recurso Localizar e substituir no editor WYSIWYG avançado:

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

2. Selecione Localizar e substituir no menu.

NOTA

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

Inserindo modelos de perguntas frequentes no editor WYSIWYG avançado

Para inserir modelos de perguntas frequentes no editor WYSIWYG avançado:

1. Navegue até o local desejado no artigo.  

2. Digite o comando /FAQs Barra e selecione Perguntas frequentes na lista.

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

3. Nos modelos de perguntas frequentes inseridos, você pode executar as seguintes opções:

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

   2. Expandir/Recolher (): Clique para expandir ou recolher os acordeões de perguntas frequentes.

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

   4. Adicionar pergunta (): clique entre as perguntas frequentes para inserir perguntas frequentes personalizadas adicionais.

NOTA

• Os modelos de perguntas frequentes são diferentes do gerador de perguntas frequentes do AI.

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

Visualização de código ()

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

• Alternar para a Visualização de código permite adicionar elementos HTML personalizados, aplicar estilos embutidos ou fazer ajustes precisos.

• Use Ctrl + F para executar uma pesquisa persistente na Visualização de código:

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

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

• No painel 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.

• A lista ordenada e não ordenada perde a ordenação sequencial.

• Não há suporte para tipos de lista aninhada nos seguintes cenários:

  • Quando o conteúdo é copiado e colado.

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

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

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 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. Uma vez feito isso, 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 esquerdo, navegue até Ferramentas de conteúdo > Designer de fluxo de trabalho. Passe o mouse sobre o status desejado e clique no ícone Editar (✎) e desative a alternância Somente leitura .

Para exibir todos os comentários em um artigo:

1. Navegue até o artigo desejado.

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

3. O painel Comentários será exibido. Use a lista suspensa na parte superior 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 obter informações, leia o artigo sobre Reviewing an article using Inline comments

Usando listas numeradas e de vários níveis no editor WYSIWYG avançado

No editor WYSIWYG avançado, você pode adicionar listas numeradas e listas de vários níveis para organizar seu conteúdo de forma eficaz.

Criando uma lista numerada

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

Método 1:
Digite qualquer um dos seguintes seguidos de um espaço, com base em sua necessidade:
1., a., A., i., I., (α).1), a), oui)

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

• /numbered list – para adicionar uma lista numerada. Passe o mouse sobre Lista numerada no menu de barra para exibir as opções de lista disponíveis.

• /multi-level list – para adicionar uma lista de vários níveis. Passe o mouse sobre Lista de vários níveis no menu de barra para exibir a lista de opções de lista de vários níveis.

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 de vários níveis

Você pode escolher entre quatro tipos de listas de vários níveis:

Pintor de formato no editor WYSIWYG avançado

O Pincel de formatação 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 conteúdo.

Você pode acessar o pintor de formato nos seguintes locais no editor WYSIWYG avançado:

• Menu Formatar

• Menu de balão que aparece quando você seleciona o texto

Usando o Pincel de formatação

Para usar o Pincel de formato:

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

2. Clique no ícone Pincel de formatação () no menu de formatação ou de balão.

3. O cursor mudará para um ícone de pincel, indicando que o pintor de formatação está ativo.

4. Aplique a formatação copiada:

   • Clicar em uma palavra ou letra no texto de destino (aplica-se apenas à palavra inteira).

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

   • Selecionando um bloco inteiro de texto.

Depois que a formatação for aplicada ou o Pincel de formatação for cancelado, o cursor voltará ao normal.

Formatação que será copiada

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

• Tipo, tamanho e cor da fonte

• Negrito, Itálico, Sublinhado, Tachado

• Espaçamento entre letras

• Cor de fundo (realce)

NOTA

• Para títulos, a tag de título 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 pintor de formatação

O Pincel de formatação será desativado se você:

• Clique em qualquer lugar fora do editor.

• Pressione Esc.

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

• Clique no ícone do Pincel de formatação ativo 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 Pincel de formatação

Os atalhos de teclado para usar o Pincel de formatação são:

Opções de formatação para colar 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 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.

Solucionando problemas

Não é 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 WYSIWYG avançado, resultando em tags HTML não suportadas.

Etapas 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 o conteúdo diretamente no editor WYSIWYG avançado para evitar desafios de formatação.

3. Se o problema já tiver ocorrido, revise a visualização de código do artigo e remova todas as tags HTML não suportadas. Essas tags geralmente são agrupadas dentro da <editor360-custom-block> tag. A remoção dessa 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>