Desenvolvendo um Mini-Editor HTML em javascript
Neste artigo vamos conhecer 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>
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
