Editor HTML

Visão geral

O editor HTML integrado permite que instrutores, professores e administradores criem e editem conteúdo diretamente em cursos, mensagens, widgets e muito mais.

Este artigo ensinará você a acessar e usar os diversos elementos do editor para criar conteúdo atraente e esteticamente agradável.

Observe que a plataforma empresarial utiliza por padrão o termo "curso" e a plataforma acadêmica utiliza por padrão o termo "aula" . Os termos "curso" e "aula" são intercambiáveis neste artigo.

O menu da barra de ferramentas

O editor HTML é exibido ao editar conteúdo em cursos, mensagens, widgets e muito mais. A barra de ferramentas consiste em uma barra de menu e ícones que permitem editar o conteúdo da seção.

Observe que as capturas de tela neste artigo são exibidas dentro de uma seção de curso, mas a barra de ferramentas funciona da mesma forma em cursos, mensagens e widgets. O construtor de conteúdo à esquerda da barra de ferramentas só está disponível ao editar cursos.

Curso, Módulo, seção da página em modo de edição com a barra de ferramentas selecionada

A barra de menu superior consiste em sete menus, que serão abordados com mais detalhes a seguir.

Seção Curso, Módulo e Editar com os menus superiores da Barra de Ferramentas destacados

Arquivo

O menu Arquivo inclui as seguintes ações:

Título	Descrição
Novo documento	Limpa a janela de texto, removendo todo o texto, imagens e links.
Pré-visualização	Abra uma janela pop-up para ver uma prévia do conteúdo publicado.
Imprimir	Imprima o conteúdo da janela de texto.

Editar

O menu Editar inclui as seguintes ações.

Título	Descrição
Desfazer	Desfazer a última ação.
Refazer	Refaça sua ação mais recente.
Corte	Remova o texto/imagem selecionado e salve-o na área de transferência.
Cópia	Copie o texto/imagem selecionado e salve-o na área de transferência.
Colar	Cole o texto/imagem da área de transferência.
Colar como texto	Cole o conteúdo da área de transferência apenas como texto, sem formatação.
Selecionar tudo	Selecione/destaque todo o conteúdo na janela de texto.
Localizar e substituir	Localize uma palavra ou frase e substitua-a por uma nova palavra/frase (se aplicável).

Visualizar

O menu Exibir inclui as seguintes ações para visualizar texto e caracteres dentro da janela de texto.

Título	Descrição
Código-fonte	Visualize/edite o código-fonte na janela de texto.
Mostrar caracteres invisíveis	Exibe caracteres invisíveis, como espaços e quebras de linha.
Mostrar blocos	Exibe blocos de parágrafos dentro da janela de texto.
Pré-visualização	Abra uma janela pop-up para ver uma prévia do conteúdo publicado.

Inserir

O menu Inserir inclui as seguintes ações para inserir imagens, vídeos, tabelas, links e muito mais.

Título	Descrição
Link	Insira um hiperlink para um URL.
Mídia	Inserir/incorporar um conteúdo multimídia.
Mesa	Insira e construa uma tabela.
Caractere especial	Insira um caractere especial.
Emojis	Insira um emoji.
Linha horizontal	Insira uma linha horizontal.
Quebra de página	Insira uma quebra de página para iniciar uma nova página.
Espaço não separável	Insira um espaço que não quebre a página.
Âncora	Insira uma âncora/marcador em uma posição/localização.
Inserir modelo	Insira um modelo salvo.
Salvar como modelo	Salve o texto selecionado como um modelo.
Data/hora	Insira as opções de data ou hora a partir do menu suspenso.
Editar equação	Clique para editar uma equação selecionada.
Carregar imagem	Clique para enviar uma imagem.
Carregar arquivo	Clique para enviar um arquivo.
Criar videoconferência	Clique para adicionar videoconferência ao texto*.
Gravar áudio	Clique para gravar áudio diretamente na janela de texto.
Gravar vídeo	Clique para gravar vídeo diretamente na janela de texto.

* Para que as opções de Criar videoconferência sejam exibidas, o(s) aplicativo(s) de videoconferência devem primeiro ser instalados a partir da Central de Aplicativos.

Formatar

O menu Formatar inclui as seguintes ações para formatar texto.

Título	Descrição
Audacioso	Destaque o texto selecionado em negrito.
itálico	Coloque o texto selecionado em itálico.
Sublinhado	Sublinhe o texto selecionado.
Riscado	Risque o texto selecionado.
Sobrescrito	Formate o texto selecionado como sobrescrito.
Subscrito	Formate o texto selecionado como um subscrito.
Código	Formate o texto selecionado como código.
Blocos	Insira a formatação de bloco apropriada a partir do menu suspenso.
Fontes	Selecione uma fonte diferente no menu suspenso.
Tamanhos de fonte	Selecione um tamanho de fonte no menu suspenso.
Alinhar	Selecione um estilo de alinhamento de texto no menu suspenso.
Altura da linha	Selecione a altura da linha no menu suspenso.
Aumentar recuo	Recue o texto ou parágrafo para a direita.
Diminuir recuo	Mova o texto ou parágrafo para a esquerda.
Cor do texto	Selecione a cor de texto desejada no menu suspenso.
Cor de fundo	Selecione uma cor de fundo no menu suspenso.
Formatação clara	Limpar a formatação do texto selecionado.

Ferramentas

O menu Ferramentas inclui as seguintes ações.

Título	Descrição
Código-fonte	Veja/edite o código-fonte.
Contagem de palavras	Veja a contagem de palavras e caracteres.

Mesa

O menu Tabela inclui as seguintes ações para inserir uma tabela e modificar sua estrutura.

Título	Descrição
Mesa	Insira uma tabela.
Célula	Opções de modificação para as células selecionadas no menu suspenso.
Linha	Modifique, exclua e/ou insira opções para a(s) linha(s) selecionada(s) no menu suspenso.
Coluna	Modifique, exclua e/ou insira opções para a(s) coluna(s) selecionada(s) no menu suspenso.
Propriedades da tabela	Visualize e modifique as propriedades da tabela, como largura, altura, bordas, etc.
Excluir tabela	Exclua a tabela selecionada.

O menu secundário da barra de ferramentas

Abaixo do menu principal, a barra de ferramentas consiste em opções suspensas de fácil acesso e ícones para formatação adicional.

Desfazer e refazer

Clique no ícone Desfazer para desfazer a ação anterior.
Clique no ícone Refazer para refazer a ação anterior.

Estilos de parágrafo e título

Clique no menu suspenso de estilo de título para aplicar formatos e estilos ao texto.

Curso, Módulo, Editar seção com o menu de estilo de título ativo e destacado

Estilo da fonte

Clique no menu suspenso de fontes para alterar a fonte do seu texto.

Tamanho da fonte

Clique no menu suspenso de tamanho da fonte para alterar o tamanho do texto.

Formato da fonte

Clique no ícone de negrito para destacar o texto.
Clique no ícone de itálico para colocar o texto em itálico.
Clique no ícone de sublinhado para sublinhar o texto.

Cor do texto

Clique no ícone de cor do texto para escolher/alterar a cor da fonte.

Curso, Módulo, Editar seção com o menu de cores do texto ativo e destacado

Alinhamento de texto

Clique no ícone de alinhamento para alinhar o texto.

Curso, Módulo, seção Editar com o menu Alinhamento ativo e selecionado

Lista com marcadores

Clique no ícone de lista com marcadores para criar e formatar uma lista com marcadores.

Lista numerada

Clique no ícone de lista numerada para criar e formatar uma lista com marcadores ou numerada.

Carregar imagem e carregar arquivo

Clique no ícone de upload de imagem para enviar uma imagem.
Clique no ícone de upload de arquivo para enviar qualquer arquivo.

Formatação clara

Clique no ícone Limpar formatação para remover estilos que possam ter sido mantidos ao copiar e colar conteúdo.

Cor de fundo

Clique no ícone de cor de fundo para adicionar destaque ao texto/imagens.

Barra de ferramentas avançada

Para funcionalidades adicionais:

Clique em " mais" Ícone para exibir a barra de ferramentas avançada.

A barra de ferramentas avançada é exibida abaixo da barra de ferramentas secundária e inclui opções adicionais, abordadas a seguir.

Curso, Módulo, seção Editar com os ícones da barra de ferramentas Avançada destacados

Recuos e linha horizontal

Clique no ícone Diminuir recuo para diminuir o recuo do texto.
Clique no ícone Aumentar recuo para recuar o texto.
Clique no ícone de linha horizontal para inserir uma linha horizontal.

Ícones para diminuir recuo, aumentar recuo e linha horizontal

Emojis

Clique no emoji Ícone para abrir o teclado de emojis.
Clique em um emoji para inseri-lo.

Caracteres especiais

Clique no caractere especial ícone para abrir a janela pop-up de Caracteres Especiais.
Clique em um caractere especial para inseri-lo.

Ícones avançados

Clique no ícone Inserir/editar link Para inserir um link para qualquer URL.
Clique no ícone Inserir/Editar mídia Para inserir/incorporar um link para qualquer URL.
Clique no ícone Inserir/editar equação Para inserir/incorporar um link para qualquer URL.
Clique no ícone Inserir modelo Para inserir um modelo.
Clique no ícone do código-fonte Para visualizar o código-fonte da página atual.
Clique no ícone Gravar áudio Para gravar áudio diretamente na página do curso.
Clique no ícone Gravar vídeo Para gravar vídeos diretamente na página do curso.

Clique no ícone Criar videoconferência Para criar um link de videoconferência, utilize uma das opções do menu suspenso.

Observação: Somente os aplicativos de videoconferência instalados em sua plataforma serão exibidos.

Curso, Módulo, Editar seção com o menu Criar webconferência ativo e selecionado

Melhores práticas

Utilize essas boas práticas para tirar o máximo proveito do editor.

Para inserir uma quebra de linha em vez de um novo parágrafo, pressione Shift + Enter.
Ao incorporar widgets HTML, visualize primeiro a janela de texto no código-fonte.

Clique no menu suspenso Exibir.
Clique em < > Código-fonte .

Cole o conteúdo de terceiros como texto sem formatação para evitar erros de formatação.
Para tornar as bordas de uma tabela invisíveis:

Selecione a tabela.
Clique em Propriedades da tabela .
Na aba Geral da janela pop-up, defina a Largura da borda como "0".
Na aba Avançado , selecione o estilo da borda como "Oculto" ou "Nenhum".

Curso, Módulo, Editar seção com uma tabela selecionada e o ícone Propriedades da tabela destacado

corretor ortográfico

O editor inclui um corretor ortográfico que sinaliza palavras com erros de ortografia com uma linha vermelha. Para corrigir um erro ortográfico:

Pressione CTRL + Clique com o botão direito do mouse .
Selecione a grafia correta na lista de sugestões.

Curso, Módulo, seção Editar com menu de ortografia ativo e destacado

Variáveis de incorporação

Você pode incorporar variáveis nas páginas das lições usando o formato {{nome da variável}}. Isso permite personalizar o conteúdo para usuários e cursos.

As seguintes variáveis podem ser usadas na página de conteúdo:

{{class_custom_field_1}}
{{class_custom_field_2}}
{{class_finish_date}}
{{class_id}}
{{class_location}}
{{class_name}}
{{class_name_with_link}}
{{class_start_date}}
{{completed_at_utc}}
{{course_code}}
{{credits}}
{{days_in_class}}
{{dias_restantes}}
{{desativar_alunos_após}}
{{organization_id}}
{{organization_name}}
{{section_code}}
{{site_name}}
{{site_name_with_url}}
{{teacher_name}}
{{teacher_name_with_link}}
{{user_email}}
{{user_first_name}}
{{user_full_name}}
{{user_full_name_with_link}}
{{ID do usuário}}
{{user_last_name}}
{{user_prefered_contact_method}}
{{user_ssn}}
{{ID do usuário}}
{{por que}}

Vídeos sobre medidas

Se você adicionar um vídeo como um link no editor HTML, poderá definir seu tamanho usando este código HTML:

<a width='100' height='700'>link</a>.

Se você deseja que o vídeo seja redimensionado automaticamente, pode omitir um dos valores (largura ou altura).
Você também pode usar valores percentuais para definir o tamanho de um vídeo, por exemplo, <width='100%' >.

Edição de imagens

O editor oferece diversas opções para editar imagens após o upload. Para editar uma imagem:

Clique na imagem.
Aparece um menu de opções.

Ícone	Descrição
	Gire a imagem no sentido anti-horário.
	Gire a imagem no sentido horário.
	Inverter imagem horizontalmente
	Inverter imagem verticalmente
	Imagem recortada
	Editar propriedades da imagem

Curso, Módulo, Editar seção com uma imagem selecionada e a barra de ferramentas de edição de imagem ativa.

Se você selecionar o ícone Editar propriedades da imagem , a janela pop-up Inserir/Editar imagem será exibida.

Fonte : Exibe a origem da imagem.
Descrição alternativa : Esta descrição é lida por leitores de tela para auxiliar usuários com deficiência visual.
Largura e altura : Ajuste o tamanho da imagem.

Nota: Use o ícone de cadeado para garantir que a imagem mantenha sua proporção de largura/altura.

Ao adicionar uma nova imagem, você também pode adicionar uma descrição para leitores de tela:

Insira uma descrição no campo "Descrição da imagem" .

Janela pop-up para carregar imagem

Modelos de conteúdo

Os modelos de conteúdo permitem salvar fragmentos de HTML no Catálogo de Recursos e inseri-los facilmente em áreas de conteúdo posteriormente. Você pode usar esse recurso para criar uma biblioteca de elementos de conteúdo comuns que utiliza com frequência em suas áreas de conteúdo.

Para adicionar um fragmento de HTML a um modelo de conteúdo:

Selecione o texto e/ou as imagens no editor HTML.
Clique com o botão direito do mouse.
Selecione Salvar como modelo .

Curso, Módulo, Editar seção com texto e imagem selecionados, com a opção Salvar como modelo destacada no menu de contexto (clique com o botão direito do mouse).

Insira um título para o modelo.
Clique em OK .
O modelo de conteúdo será salvo em sua biblioteca pessoal.

Janela pop-up Salvar como modelo

Para acessar seus modelos de conteúdo salvos:

Clique em Recursos na barra de navegação à esquerda.
Clique em Catálogo no menu suspenso.
Filtre por Tipo de recurso > Modelo de conteúdo no painel de pesquisa.
Clique no seu modelo de conteúdo.

Recursos, página do catálogo com a seção Tipo de recurso destacada no painel de pesquisa.

O modelo de conteúdo é exibido. Para ver mais detalhes sobre um modelo de conteúdo:

Clique em Detalhes .

Recursos, janela pop-up de modelo de conteúdo

Agora você pode atualizar a seção de conteúdo:

Clique em Editar para editar o conteúdo .
Clique em Excluir para remover o modelo.

Recursos, Modelo de conteúdo com ícones de Editar e Excluir destacados

Ao clicar em editar, você poderá atualizar o conteúdo e compartilhá-lo com outros usuários.

Selecione a biblioteca Pessoal , Organizacional ou Empresarial se desejar que o modelo de conteúdo esteja disponível para outros usuários.
Após editar o conteúdo, clique em Salvar .

Recursos, tela de edição do modelo de conteúdo

Para inserir uma cópia do modelo de conteúdo em uma seção:

Acesse a seção.
Clique com o botão direito do mouse.
Selecione Inserir Modelo .
Selecione o modelo na lista suspensa.
Clique em Salvar .

Como usar o editor HTML