Retrieve typed data in the wysiwyg Bootstrap editor

Asked

Viewed 363 times

1

How do I get the data typed in the form where I use the wysiwyg from Bootstrap?

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

I am doing so, as I was instructed, but does not pass the value of #editor to 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 answers

2

You can take it with:

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

This stores in the variable conteudo the HTML code of the text inserted in the editor.

You can also use the method .trim() to dry the blanks created on the edges:

var conteudo = $('#editor').html().trim();
  • php would do how? I tried echo $_POST['content'] but it didn’t work

  • You want to send via form and then pick up in PHP?

  • that same friend

  • 1

    You have to create a form with a hidden and empty <textarea> : <textarea name="conteudo" style="display: none;"></textarea>. When submitting the form, play the editor’s html inside the textarea: $("form").submit(function(){&#xA; $("[name=conteudo]").html($("#editor").html().trim());&#xA;});

  • Strange did as you said more did not work, has two foms on the same page, will that is why?

  • Yes. With two Forms it will be a problem. Put an id in the editor form and change the selector: $("#id_do_form").submit(

  • Did not give yet, please look at my question again, I edited according to what instituted me.

  • Your question only has your code pasted. There is no way to show only the code of what is going wrong? I couldn’t even find the #editor in your HTML...

Show 3 more comments

2


a few days ago was with the same problem, so I saw in your code above you should take some care mainly in the references given to the ID, in my humble opinion you should try to make the following changes:

<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>

Look carefully at the code, I left it all explained by comments, I hope I’ve been able to help, good luck on your journey.

0

Not saving in the database but shown below the div used to construct the text

//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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.