Desenvolvimento de um Mini-Editor HTML
Neste artigo você vai ver um Mini-Editor
HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) → desenvolvido todo em javascript.
Na introdução deste artigo, vamos
ver os detalhes e instruções. Logo no final,
você terá o arquivo Editor.htm para ser
visualizado, e, se desejar, poderá pegar o código.
Orientação importantes
Este mini editor HTML é um scriptlet
e, por isto, pode ser inserido dentro de outras páginas, por
meio das tags <OBJECT>
e </OBJECT>. Veja:
<OBJECT ID=myEditor
DATA="editor.htm" TYPE="text/x-scriptlet"
WIDTH="95%" HEIGHT="300">
</OBJECT>
Obs.: Os valores de WIDTH e HEIGHT podem ser
modificados conforme suas necessidades, claro.
Modo de usar
Para utilizar este editor junto a um <FORM>,
você precisa colocar algumas funções na página que os conterá.
Veja o código (observe que o código JavaScript fica dentro
do <HEAD>):
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function PegarTexto(f) {
f.elements.Mensagem.value = document.all.myEditor.html
+ "";
}
function Limpar() {
document.all.myEditor.html = "";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="POST" NAME="XXX" ACTION="xxx.htm"
onSubmit="PegarTexto(this);">
<TEXTAREA NAME="Mensagem" STYLE="display:
none"></TEXTAREA>
<OBJECT ID=myEditor DATA="editor.htm" TYPE="text/x-scriptlet"
WIDTH="95%" HEIGHT="300">
<!– Isto só é exibido em browsers que não suportão
scriptlets –>
</OBJECT>
<INPUT TYPE="Submit" NAME="Submit"
VALUE="Enviar">
<INPUT TYPE="Reset" NAME="Reset"
VALUE="Limpar o Formulário" OnClick="Limpar();">
</FORM>
</BODY>
Para o caso de haver a necessidade de se abrir
a página com o editor já contendo um texto qualquer (em uma
alteração de registro, por exemplo), pode-se fazer o seguinte:
Insere-se um TEXTAREA como o
de cima, mas com o nome "Editar" (por exemplo –
só para ser diferente) e coloca-se uma função para jogar o
texto para o editor.
Veja o exemplo (observe que, dessa vez não
é necessário que o script estaja dentro do <HEAD>,
mas, ainda assim, é necessário que o <TEXTAREA>
estaja dentro do <FORM>):
<FORM METHOD="POST"
NAME="XXX" ACTION="xxx.htm" onSubmit="PegarTexto(this);">
(…)
<TEXTAREA NAME="Editar"
STYLE="display: none">
Um texto qualquer
</TEXTAREA>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
window.onload = Preencher();
function Preencher() {
document.all.myEditor.html = XXX.elements.Editar.value;
//Onde ‘XXX’ é o nome do FORM (veja no código anterior)
}
</SCRIPT>
Você pode controlar isto pelo ASP: se for uma
alteração, ‘imprime’ isto na página (com Response.Write).
Se não for, não imprime.
Página Editor.htm
|
Clique |
Matérias especiais e reportagens conduzidas internamente pela Redação iMasters. Acompanhe no Twitter @imasters e no Instagram/Threads @portalimasters
