Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Editor de texto

Guest dandao

Perguntado por Guest dandao,

 Share

Pergunta

Guest dandao

Guest dandao

Postado
Postado

Olá, peguei um script de editor de texto em javascript, esta funcionando legal, mas queria fazer uma alteracao...

Colocar um botao para submeter o formulario, creio q devo utilizar um textarea ao invés do iframe...alguém pode me ajudar a fazer isso? não consegui!!!

javascript

function Iniciar() {
        editor.document.designMode = 'On';
    }

    function recortar() {
        editor.document.execCommand('cut', false, null);
    }

    function copiar() {
        editor.document.execCommand('copy', false, null);
    }
    
    function colar() {
        editor.document.execCommand('paste', false, null);
    }

    function desfazer() {
        editor.document.execCommand('undo', false, null);
    }

    function refazer() {
        editor.document.execCommand('redo', false, null);
    }

    function negrito() {
        editor.document.execCommand('bold', false, null);
    }

    function italico() {
        editor.document.execCommand('italic', false, null);
    }

    function sublinhado() {
        editor.document.execCommand('underline', false, null);
    }

    function alinharEsquerda() {
        editor.document.execCommand('justifyleft', false, null);
    }

    function centralizado()    {
        editor.document.execCommand('justifycenter', false, null);
    }

    function alinharDireita() {
        editor.document.execCommand('justifyright', false, null);
    }
    
    function justificado() {
        editor.document.execCommand('justifyfull', false, null);
    }

    function numeracao() {
        editor.document.execCommand('insertorderedlist', false, null);
    }

    function marcadores() {
        editor.document.execCommand('insertunorderedlist', false, null);
    }

    function fonte(fonte) {
        if(fonte != '')
            editor.document.execCommand('fontname', false, fonte);
    }

    function tamanho(tamanho) {
        if(tamanho != '')
            editor.document.execCommand('fontsize', false, tamanho);
    }
index.html 
<body onLoad="Iniciar()" bgcolor="#EFEDE1">
<table align="center" width="600px" height="30px" border="0" cellspacing="0" cellpadding="0" >    
    <tr>
    <td align="center">

    <select name="fonte" onChange="fonte(this.options[this.selectedIndex].value)">
        <option value=""></option>
        <option value="Arial">Arial</option>
        <option value="Courier">Courier</option>
        <option value="Sans Serif">Sans Serif</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Verdana">Verdana</option>
    </select>
    &nbsp;        
    <select name="tamanho" onChange="tamanho(this.options[this.selectedIndex].value)">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>

    </td>

    <td align="center">
        
        <!-- Recortar -->
        <img src="recortar.gif" onClick="recortar()" style="cursor:hand">
            
        <!-- Copiar -->
        <img src="copiar.gif" onClick="copiar()" style="cursor:hand">
            
        <!-- Colar -->
        <img src="colar.gif" onClick="colar()" style="cursor:hand">
            
        <!-- Desfazer --> 
        <img src="desfazer.gif" onClick="desfazer()" style="cursor:hand">
            
        <!-- Refazer -->
        <img src="refazer.gif" onClick="refazer()" style="cursor:hand">
            
        <!-- Negrito --> 
        <img src="negrito.gif" onClick="negrito()" style="cursor:hand">
            
        <!-- Itálico -->
        <img src="italico.gif" onClick="italico()" style="cursor:hand">
            
        <!-- Sublinhado -->
        <img src="sublinhado.gif" onClick="sublinhado()" style="cursor:hand">
            
        <!-- Alinhar à Esquerda -->
        <img src="alinhamentoesquerda.gif" onClick="alinharEsquerda();" style="cursor:hand">
            
        <!-- Alinhar ao Centro -->
        <img src="centralizado.gif" onClick="centralizado()" style="cursor:hand">
            
        <!-- Alinha à Direita -->
        <img src="alinhamentodireita.gif" onClick="alinharDireita()" style="cursor:hand">
        
        <!-- Justificado -->
        <img src="justificado.gif" onClick="justificado()" style="cursor:hand">
        
        <!-- Numeração -->
        <img src="numeracao.gif" onClick="numeracao()" style="cursor:hand">

        <!-- Marcadores -->
        <img src="marcador.gif" onClick="marcadores()" style="cursor:hand">
    
    </td>
    </tr>
    </table>

    <center>
    <iframe id="editor" frameborder="0" 
        style="border:1px solid; width: 582px; height:350px">
    </iframe>
    </center>

</body>
</html>

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
KaKarotto

KaKarotto

Postado
Postado

Não precisa de textarea não, o bom de usar iframes é que ele automaticamente vai adicionando as tags e você vê o texto da forma "rica". Se usasse textarea você veria as tags. Ficaria meio feio..

Vamo lá, na primeira parte do seu código você pode fazer o seguinte:

function Iniciar() {

       editor.document.designMode = 'On'

         document.forms["formEdit"].onsubmit=function(){
         document.getElementById("texto").value=editor.document.body.innerHTML
         return true
        }
}
Eu apenas acrescentei a sua função "Iniciar" uma função que vai pegar um formulário definido como name "formEdit" e que ao submetê-lo você irá jogar o conteúdo do iframe digitado para um input escondido chamado "texto". Agora o html: 
<form action="http://suapagina.com.br/pegaDados.php"  name="formEdit" id="formEdit" method="post">
    <iframe id="editor" name="editor" frameborder="0"
        style="border:1px solid; width: 582px; height:350px">
    </iframe>
    <input type="hidden" id="texto" name="texto">
    <input type="submit" value="mandar" />
    </form>

Viu? É só usar um formulário, que tenha um input escondido e que ao submeter você pega todo o valor digitado no iframe e coloca no input hidden. As tags irão juntas, então se você enviar isso para uma página de servidor e mostrá-la, irá perceber que ela vem formatada do jeito que quer, com fonte, cor, negrito, centralizado o que for...

Akeleabrass

Link para o comentário
Compartilhar em outros sites
  • 0
Guest Dandao

Guest Dandao

Postado
Postado

E ai, beleza? testei seu codigo e não funcionou, não ta selecionando a fonte, acho q o problema seja no form. Quando eu retiro o <form....> e o </form>, ai funciona perfeitamente

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,6k
×
×
  • Criar Novo...