Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jonata

tutorial: construindo um editor de texto tynMCE

Por , em Javascript

Recommended Posts

jonata    0

jonata
Postado

ESTE É UM TUTORIAL QUE ENSINA A CRIAR UM EDITOR DE TEXTO EM MODO DE DESIGN, SEM MOSTRAR AS TAGS HTML

 

 

 

devido a grande procura resolvi postar um tuto explicando como fazer um editor de texto pra web. Muitos gstariam de entender como editores como o tyMCE aplica tais estilos, que funcões sãoutilizadas..etc

mas, é simples e fácil de construir.

 

OBS>: Espero que gostem, postem suas dúvidas (NADA DE PERGUNTAS PRIMÁRIAS) pois, dependendo da procura e das opniões irei postar mais complementos mostrando como implementar funçoes de imagem, etc.

 

 

Desde o IE 5 existe uma função que permite editar conteúdo de uma página. esta é execComand

 

CODE
valorRetornado = object.execCommand ( comando, flag, valor);

comando=o atributo a ser acrescido, por exemplo a variável(bold,italic,underline,etc).

flag=um valor boleano, indica se há uma relação com o usuário, geralmente permanece "false"

valor=atributo que se relaciona com o comando.

 

 

exemplo prático:

CODE
<html>

 

<head>

 

<title>Editor de Texto JavaScript ::: Linha de CĂłdigo</title>

 

<script language="JavaScript">

 

 

 

function Iniciar() {

 

editor.document.designMode = 'On';

 

}

 

 

 

function italico() {

 

editor.document.execCommand('italic', false, null);

}

 

</script>

<body onLoad="Iniciar()">

 

<center>

<a href="#" onClick="italico()">Italico</a><br>

 

<iframe id="editor" frameborder="0"

style="border:1px solid; width: 200px; height:100px"></iframe>

</center>

</body>

</html>

 

 

no exemplo acima, eu apliquei o estilo itálico

 

 

bem...

O iframe serve como editor de texto onde poderemos aplicar design - > atribuir,modificar, etc.

 

OBS>:

 

editor.document.designMode = 'On';

 

esta propriedade é que permite modificar design no iframe. Esta tem de ser "On", ou seja ativo. Para desativar esta propriedade é só mudar para "Off". é chamada na carga da página (ONLOAD)

 

Você pode estar se perguntando: Como posso enviar o conteúdo via form?

 

É só acrescer ao seu código isto:

 

document.getElementById('campohidden').value=editor.document.body.innerHTML;

 

Crie um campo hidden(oculto) como o nome "campohidden". Este conterá todo conteúdo do iframe "editor".

 

Para transferir o conteúdo para este campo oculto, geralmente é chamada a função "Onsubmit" (apenas uma dica)

lista de comandos úteis:

 

CODE
· cut: Recorta o texto selecionado do frame para a área de transferência.

 

· copy: Copia o texto selecionado do frame para a área de transferĂŞncia.

 

· pasta: cola os dados da área de transferĂŞncia no frame.

 

· undo: desfazer uma ação.

 

· redo: refazer um ação desfeita.

 

· bold: transforma pra negrito.

 

· italic: transforma para italico.

 

· underline: sublinha o texto.

 

· justifyleft: alinha a esquerda.

 

· justifycenter: alinha centralizado.

 

· justifyright: alinha a direita.

 

· insertorderedlist: realiza numeração com as linhas selecionadas.

 

· insertunorderedlist: coloca marcadores nas linhas selecionadas.

 

· fontname: muda a fonte do texto selecionado.

 

· fontsize: muda o tamanho do texto selecionado.

 

 

bem...

 

conforme o enunciado, dependendo do interesse e das críticas (espero que positivas, rsrs), estarei implementando este tuto com mais funçoes e dicas...

como: interpolação entre modo designe e modo edição em html (editar as tags html) e outros.

para que você possa ter em mãos de fato um editor seu gosto, do jeito que voce quer

 

e principalmente, nada de bbcode

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito