Jump to content

Como capturar HTML editado no Textarea usando JavaScript?

claugo484

Por claugo484
em JavaScript

 Compartilhar

Postagens Recomendadas

claugo484

claugo484

Postado
Postado

image.png

Olá, alguém poderia me ajudar a resolver este problema: Edito no textarea e preciso pegar no campo da direita o texto com código html e não sei como fazer.

<div id='wysiwyg' >

<div id='editor' contenteditable></div>

<form action="./saida.php" method="POST">

<textarea id='output' name='output' rows="8" cols="100"></textarea>

<input type="submit" value="Submit">

</form>

  • Curtir 1
Link to comment
Compartilhe em outros sites
Tiago Neves

Tiago Neves

Postado
Postado

Fala, @claugo484!
 

Para resolver o problema de obter o código HTML do conteúdo editável e colocá-lo no campo textarea, você pode usar JavaScript para capturar o conteúdo HTML do elemento div editável e atualizar o valor do textarea antes do envio do formulário. 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Editor WYSIWYG</title>
</head>
<body>

<div id='wysiwyg'>
    <div id='editor' contenteditable="true"></div>
</div>

<form action="./saida.php" method="POST" onsubmit="updateOutput()">
    <textarea id='output' name='output' rows="8" cols="100"></textarea>
    <input type="submit" value="Submit">
</form>

<script>
    function updateOutput() {
        var editorContent = document.getElementById('editor').innerHTML;
        document.getElementById('output').value = editorContent;
    }
</script>

</body>
</html>

Explicação:

  • contenteditable: O atributo contenteditable="true" no div permite que o conteúdo seja editável pelo usuário.
  • JavaScript: A função updateOutput() é chamada quando o formulário é submetido. Esta função pega o conteúdo HTML do div editável (#editor) e coloca esse conteúdo no textarea (#output).

Quando o formulário é enviado, o conteúdo HTML do editor será colocado no campo textarea, e será enviado junto com o formulário.

  • Curtir 1
Link to comment
Compartilhe em outros sites
  • Casa do Desenvolvedor mudou o título para Como capturar HTML editado no Textarea usando JavaScript?

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...