1

Como faço para pegar os dados digitados no formulário onde uso o wysiwyg do Bootstrap?

http://mindmup.github.io/bootstrap-wysiwyg/

Estou fazendo assim, como fui instruído, mas não passa o valor do #editor para o PHP

Js

<script>
         $(function(){
           function initToolbarBootstrapBindings() {
             var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
                   'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                   'Times New Roman', 'Verdana'],
                   fontTarget = $('[title=Font]').siblings('.dropdown-menu');
             $.each(fonts, function (idx, fontName) {
                 fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
             });
             $('a[title]').tooltip({container:'body'});
            $('.dropdown-menu input').click(function() {return false;})
             .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
               .keydown('esc', function () {this.value='';$(this).change();});

             $('[data-role=magic-overlay]').each(function () { 
               var overlay = $(this), target = $(overlay.data('target')); 
               overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
             });
             if ("onwebkitspeechchange"  in document.createElement("input")) {
               var editorOffset = $('#editor').offset();
               $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
             } else {
               $('#voiceBtn').hide();
             }
         };
         function showErrorAlert (reason, detail) {
         var msg='';
         if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
         else {
            console.log("error uploading file", reason, detail);
         }
         $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
          '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
         };
           initToolbarBootstrapBindings();  
         $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
           window.prettyPrint && prettyPrint();



        $("#form12").submit(function(){ $("[name=conteudo]").html($("#editor").html().trim()); });


          });


      </script>

Html

<form role="form" id="form12" name="form1" method="post" action="" enctype="multipart/form-data" accept-charset="UTF-8">

            <div id="alerts"></div>
            <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
               <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"><i class="icon-font"></i><b class="caret"></b></a>
                  <ul class="dropdown-menu">
                  <li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li><li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li><li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li><li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a></li><li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li><li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a></li><li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans MS</a></li><li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li><li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li><li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida Grande</a></li><li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a></li><li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li><li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li><li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New Roman</a></li><li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li></ul>
               </div>
               <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                     <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                     <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                     <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                  </ul>
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                  <a class="btn" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                  <a class="btn" data-edit="strikethrough" title="" data-original-title="Strikethrough"><i class="icon-strikethrough"></i></a>
                  <a class="btn" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="insertunorderedlist" title="" data-original-title="Bullet list"><i class="icon-list-ul"></i></a>
                  <a class="btn" data-edit="insertorderedlist" title="" data-original-title="Number list"><i class="icon-list-ol"></i></a>
                  <a class="btn" data-edit="outdent" title="" data-original-title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                  <a class="btn" data-edit="indent" title="" data-original-title="Indent (Tab)"><i class="icon-indent-right"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="justifyleft" title="" data-original-title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                  <a class="btn" data-edit="justifycenter" title="" data-original-title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                  <a class="btn" data-edit="justifyright" title="" data-original-title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                  <a class="btn" data-edit="justifyfull" title="" data-original-title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Hyperlink"><i class="icon-link"></i></a>
                  <div class="dropdown-menu input-append">
                     <input class="span2" placeholder="URL" type="text" data-edit="createLink">
                     <button class="btn" type="button">Add</button>
                  </div>
                  <a class="btn" data-edit="unlink" title="" data-original-title="Remove Hyperlink"><i class="icon-cut"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn" title="" id="pictureBtn" data-original-title="Insert picture (or just drag &amp; drop)"><i class="icon-picture"></i></a>
                  <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 41px; height: 34px;">
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="undo" title="" data-original-title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                  <a class="btn" data-edit="redo" title="" data-original-title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
               </div>
               <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="" style="display: none;">
            </div>
            <div id="editor" contenteditable="true">
               Go ahead…
            </div>
            <div class="clear"></div>
            <div class="col-md-12">        
                              <input name="cadastrar" type="submit" id="cadastrar" value="Cadastrar Dica " class="btn btn-default">
            </div>
         </form>

3 Respostas 3

2

a alguns dias atras estava com o mesmo problema, pelo que vi em seu código acima vc deve ter alguns cuidados principalmente nas referencias dadas ao ID, na minha humilde opinião vc deve tentar fazer as seguintes alterações:

<div class="conteuner">
    <div class="row">
        <div class="col-md-12">
            <div id="alerts"></div>
            <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
               <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"><i class="icon-font"></i><b class="caret"></b></a>
                  <ul class="dropdown-menu">
                  <li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li><li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li><li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li><li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a></li><li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li><li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a></li><li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans MS</a></li><li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li><li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li><li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida Grande</a></li><li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a></li><li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li><li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li><li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New Roman</a></li><li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li></ul>
               </div>
               <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                     <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                     <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                     <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                  </ul>
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="bold" title="" data-original-title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                  <a class="btn" data-edit="italic" title="" data-original-title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                  <a class="btn" data-edit="strikethrough" title="" data-original-title="Strikethrough"><i class="icon-strikethrough"></i></a>
                  <a class="btn" data-edit="underline" title="" data-original-title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="insertunorderedlist" title="" data-original-title="Bullet list"><i class="icon-list-ul"></i></a>
                  <a class="btn" data-edit="insertorderedlist" title="" data-original-title="Number list"><i class="icon-list-ol"></i></a>
                  <a class="btn" data-edit="outdent" title="" data-original-title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                  <a class="btn" data-edit="indent" title="" data-original-title="Indent (Tab)"><i class="icon-indent-right"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="justifyleft" title="" data-original-title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                  <a class="btn" data-edit="justifycenter" title="" data-original-title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                  <a class="btn" data-edit="justifyright" title="" data-original-title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                  <a class="btn" data-edit="justifyfull" title="" data-original-title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Hyperlink"><i class="icon-link"></i></a>
                  <div class="dropdown-menu input-append">
                     <input class="span2" placeholder="URL" type="text" data-edit="createLink">
                     <button class="btn" type="button">Add</button>
                  </div>
                  <a class="btn" data-edit="unlink" title="" data-original-title="Remove Hyperlink"><i class="icon-cut"></i></a>
               </div>
               <div class="btn-group">
                  <a class="btn" title="" id="pictureBtn" data-original-title="Insert picture (or just drag &amp; drop)"><i class="icon-picture"></i></a>
                  <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 41px; height: 34px;">
               </div>
               <div class="btn-group">
                  <a class="btn" data-edit="undo" title="" data-original-title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                  <a class="btn" data-edit="redo" title="" data-original-title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
               </div>
               <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="" style="display: none;">
            </div>

            <!-- DIV que ira pegar o conteúdo e toda a sua formatação -->
            <div name="editor" id="editor" contenteditable="true">
               Escreva aqui seu conteúdo.
            </div>
            <!-- Form que ira executar o envio do textearea para a pagina resultado.php -->
            <form role="form_redacao" id="form_redacao" name="form_redacao" method="post" action="resultado.php" enctype="multipart/form-data" accept-charset="UTF-8">
                <!-- Textearea que está pegando as inforações da DIV acima #editor e capturando o conteúdo nela existente -->
                <textarea name="conteudo_redacao" name="conteudo_redacao" style="display: none;"></textarea>
            </form>
            <br>
            <!-- botão que execulta o comando de envio do conteúdo -->
            <input type="submit" class="btn btn-default" id="btn-enviar" value="Mostrar Resultado">
            <div class="clear"></div>
        </div>    
    </div>    
</div>    
<script>
     $(function(){
       function initToolbarBootstrapBindings() {
         var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
               'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
               'Times New Roman', 'Verdana'],
               fontTarget = $('[title=Font]').siblings('.dropdown-menu');
         $.each(fonts, function (idx, fontName) {
             fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
         });
         $('a[title]').tooltip({container:'body'});
        $('.dropdown-menu input').click(function() {return false;})
         .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
           .keydown('esc', function () {this.value='';$(this).change();});

         $('[data-role=magic-overlay]').each(function () { 
           var overlay = $(this), target = $(overlay.data('target')); 
           overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
         });
         if ("onwebkitspeechchange"  in document.createElement("input")) {
           var editorOffset = $('#editor').offset();
           $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
         } else {
           $('#voiceBtn').hide();
         }
     };
     function showErrorAlert (reason, detail) {
     var msg='';
     if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
     else {
        console.log("error uploading file", reason, detail);
     }
     $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
      '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
     };
       initToolbarBootstrapBindings();  
     $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
       window.prettyPrint && prettyPrint();

      /* você pode tentar usar essa linha que comentei abaixo*/     
     /*$("form_redacao").submit(function(){ $("[name=conteudo_redacao]").html($("#editor").html().trim()); });*/



        /* Abaxio a função obtem o comando de click do botão identifica o editor e em seguia 
           ira pegar o conteúdo pacturado do #editor para o textearea #conteudo_redacao e finalmente enviado para resultado.php onde
           vc pode trata-lo como por exemplo $conteudo_redacao = $_POST["conteudo_redacao"];

        */ 
        $('#btn-enviar').click(function(){

            //trata o conteudo vindo da Div e o transfere para um textarea que fica ocluto. 
            $('#editor').wysiwyg();

            $("#conteudo_redacao").text($("#editor").html().trim());

            //ativa a ação após dar o click no botão de enviar
            $('#form_redacao').submit();    
        });              

      });
    </script>

Veja cuidadosamente o código, deixei tudo explicado por comentários, espero ter conseguido ajudar, boa sorte em sua jornada.

2

Você consegue pegar com:

var conteudo = $('#editor').html();

Isso guarda na variável conteudo o código em formato HTML do texto inserido no editor.

Pode ainda usar o método .trim() para enxugar os espaços em branco criados nas bordas:

var conteudo = $('#editor').html().trim();
8
  • no php faria como? Tentei o echo $_POST['conteudo'] mas nao deu certo
    – Wagner
    Commented 13/11/2018 às 19:19
  • Vc quer enviar via form e depois pegar no PHP?
    – Sam
    Commented 13/11/2018 às 19:22
  • isso mesmo amigo
    – Wagner
    Commented 13/11/2018 às 19:23
  • 1
    Tem que criar um formulário com um <textarea> oculto e vazio: <textarea name="conteudo" style="display: none;"></textarea>. Ao submeter o formulário, jogar o html do editor dentro do textarea: $("form").submit(function(){ $("[name=conteudo]").html($("#editor").html().trim()); });
    – Sam
    Commented 13/11/2018 às 19:37
  • estranho fiz como vc falou mais nao deu certo, tem dois forms na mesma página, será que é por isso?
    – Wagner
    Commented 13/11/2018 às 19:42
0

Não esta salvando no banco e sim mostrado em baixo da div usada para construção do texto

//Rota do editor de texto e criação de post

router.get('/criar_post', (req, res) => {
  res.render("admin/criar_post")
})

//Rota da ação para salvar no banco de dados

router.post('/novo_post', (req, res) => {
  const novoPost = {
    post: req.body.post
  }
  new Post(novoPost).save().then(() => {
    console.log("Salvo com sucesso!")
  }).catch((err) => {
    console.log("Erro ao salvar: " + err)
  })
})

const mongoose = require("mongoose")
const Schema = mongoose.Schema

const Post = new Schema({
    post: {
        type: String,
        require: true
    },
    date: {
        type: Date,
        default: Date.now
    }
    })

    mongoose.model("posts", Post)
	<div class="container">


		<h1 class="text-center">Simple HTML Editor</h1>
		<div class="btn-dark text-center" data-role="editor-toolbar" data-target="#collapseExample">

			<div class="btn-group">
				<a class="btn dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"><i
						class="fa fa-list"></i><b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li>
					<li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li>
					<li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li>
					<li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a></li>
					<li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li>
					<li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a></li>
					<li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans MS</a></li>
					<li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li>
					<li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li>
					<li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida Grande</a></li>
					<li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a></li>
					<li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li>
					<li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li>
					<li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New
							Roman</a></li>
					<li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li>
				</ul>
			</div>

			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i
						class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a data-edit="fontSize 5" class="fs-Five">Imenso</a></li>
					<li><a data-edit="fontSize 3" class="fs-Three">Normal</a></li>
					<li><a data-edit="fontSize 1" class="fs-One">Pequeno</a></li>
				</ul>
			</div>

			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Text Highlight Color"><i
						class="fa fa-paint-brush"></i>&nbsp;<b class="caret"></b></a>
				<ul class="dropdown-menu">
					<p>&nbsp;&nbsp;&nbsp;Cor de realce de texto:</p>
					<li><a data-edit="backColor #00FFFF">Azul</a></li>
					<li><a data-edit="backColor #00FF00">Verde</a></li>
					<li><a data-edit="backColor #FF7F00">Laranja</a></li>
					<li><a data-edit="backColor #FF0000">Vermelho</a></li>
					<li><a data-edit="backColor #FFFF00">Amarelo</a></li>
				</ul>
			</div>

			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Color"><i
						class="fa fa-font"></i>&nbsp;<b class="caret"></b></a>
				<ul class="dropdown-menu">
					<p>&nbsp;&nbsp;&nbsp;Cor da fonte:</p>
					<li><a data-edit="foreColor #000000">Preto</a></li>
					<li><a data-edit="foreColor #0000FF">Azul</a></li>
					<li><a data-edit="foreColor #30AD23">Verde</a></li>
					<li><a data-edit="foreColor #FF7F00">Laranja</a></li>
					<li><a data-edit="foreColor #FF0000">Vermelho</a></li>
					<li><a data-edit="foreColor #FFFF00">Amarelo</a></li>
				</ul>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
				<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i
						class="fa fa-italic"></i></a>
				<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i
						class="fa fa-strikethrough"></i></a>
				<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i
						class="fa fa-underline"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i
						class="fa fa-list-ul"></i></a>
				<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i
						class="fa fa-list-ol"></i></a>
				<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i
						class="fa fa-outdent"></i></a>
				<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i
						class="fa fa-align-left"></i></a>
				<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i
						class="fa fa-align-center"></i></a>
				<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i
						class="fa fa-align-right"></i></a>
				<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i
						class="fa fa-align-justify"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i
						class="fa fa-link"></i></a>
				<div class="dropdown-menu input-append">
					<input placeholder="URL" type="text" data-edit="createLink" />
					<button class="btn" type="button">Add</button>
				</div>
			</div>

			<div class="btn-group">
				<span class="btn btn-default" title="Insert picture (or just drag &amp; drop)" id="pictureBtn">
					<i class="fa fa-image">
					</i>
					<input class="imgUpload" type="file" data-role="magic-overlay" data-target="#pictureBtn"
						data-edit="insertImage"
						style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 37px; height: 30px;">
				</span>
			</div>

			<div class="btn-group">
				<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
				<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
				<a class="btn btn-default" data-edit="html" title="Clear Formatting"><i
						class='glyphicon glyphicon-pencil'></i></a>
			</div>
		</div>
		<div id="editorPreview"></div>



<div id="alerts"></div>





<!-- DIV que ira pegar o conteúdo e toda a sua formatação -->
<div name="editor" id="editor" contenteditable="true">
  Escreva aqui seu conteúdo.
</div>

<!-- Form que ira executar o envio do textearea para a pagina resultado.php -->
<form role="post" id="post" name="post" method="post" action="/admin/novo_post" enctype="multipart/form-data"
  accept-charset="UTF-8">
  <!-- Textearea que está pegando as inforações da DIV acima #editor e capturando o conteúdo nela existente -->
  <textarea name="post" style="display: none;"></textarea>
</form>

<br>
<!-- botão que execulta o comando de envio do conteúdo -->
<input type="submit" class="btn btn-default" id="btn-enviar" value="Mostrar Resultado">
<div class="clear"></div>




<script>
  $(function () {
    function initToolbarBootstrapBindings() {
      var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
        'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
        'Times New Roman', 'Verdana'],
        fontTarget = $('[title=Font]').siblings('.dropdown-menu');
      $.each(fonts, function (idx, fontName) {
        fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
      });
      $('a[title]').tooltip({ container: 'body' });
      $('.dropdown-menu input').click(function () { return false; })
        .change(function () { $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle'); })
        .keydown('esc', function () { this.value = ''; $(this).change(); });

      $('[data-role=magic-overlay]').each(function () {
        var overlay = $(this), target = $(overlay.data('target'));
        overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
      });
      if ("onwebkitspeechchange" in document.createElement("input")) {
        var editorOffset = $('#editor').offset();
        $('#voiceBtn').css('position', 'absolute').offset({ top: editorOffset.top, left: editorOffset.left + $('#editor').innerWidth() - 35 });
      } else {
        $('#voiceBtn').hide();
      }
    };
    function showErrorAlert(reason, detail) {
      var msg = '';
      if (reason === 'unsupported-file-type') { msg = "Unsupported format " + detail; }
      else {
        console.log("error uploading file", reason, detail);
      }
      $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
        '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
    };
    initToolbarBootstrapBindings();
    $('#editor').wysiwyg({ fileUploadError: showErrorAlert });
    window.prettyPrint && prettyPrint();

    /* você pode tentar usar essa linha que comentei abaixo*/
    /*$("form_redacao").submit(function(){ $("[name=conteudo_redacao]").html($("#editor").html().trim()); });*/



    /* Abaxio a função obtem o comando de click do botão identifica o editor e em seguia 
       ira pegar o conteúdo pacturado do #editor para o textearea #conteudo_redacao e finalmente enviado para resultado.php onde
       vc pode trata-lo como por exemplo $conteudo_redacao = $_POST["conteudo_redacao"];

    */
    $('#btn-enviar').click(function () {

      //trata o conteudo vindo da Div e o transfere para um textarea que fica ocluto. 
      $("#editor").wysiwyg();

      $("#post").text($("#editor").html().trim());

      //ativa a ação após dar o click no botão de enviar
      $("#post").submit();
    });

  });
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .