Pick up content via DIV, using the bootstrap-wysiwyg-master and sending via $_POST

Asked

Viewed 569 times

-2

I am creating my bootstrap-wysiwyg-master, and I need the DIV where is the content of the text, be sent via POST in PHP, that I can include it in the database etc... Below is the code of the form I’m using:

<form method="POST" action="teste.php" name="form_redacao" id="form_redacao" onsubmit="return enviardados();" enctype="multipart/form-data" novalidate></form>

Then, after the edit buttons, comes the DIV that gets the edited content:

<div name="editor" id="editor">
  Escreva seu texto...
</div>

And finally the button that will submit this information and send via POST to test.php.

Now the script that would help rescue the data:

<script>
$('#btn-enviar').click(function(){    
    alert($(this).parents('div #editor').attr('getText'));
    $('#form_redacao').submit();    
});
</script>

The test.php page only has the POST for running test, then I add the content in the database:

<?php
   echo $_POST['editor'];
?>

Obs.: currently does nothing. The idea is to be able to take this data and write to the database and then later be able to update, delete etc. It would be for a use of an Adm panel, simple thing.

Complete code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="opensource rich wysiwyg text editor jquery bootstrap execCommand html5" />
    <meta name="description" content="This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor" />

    <link rel="apple-touch-icon" href="//mindmup.s3.amazonaws.com/lib/img/apple-touch-icon.png" />
    <link rel="shortcut icon" href="http://mindmup.s3.amazonaws.com/lib/img/favicon.ico" >
    <link href="external/google-code-prettify/prettify.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="external/jquery.hotkeys.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="external/google-code-prettify/prettify.js"></script>

    <link href="index.css" rel="stylesheet">
    <link href="personalizado.css" rel="stylesheet">  
    <script src="bootstrap-wysiwyg.js"></script>    


  </head>
  <body>

<div class="container">
    <form method="POST" action="teste.php" name="form_redacao" id="form_redacao" onsubmit="return enviardados();" enctype="multipart/form-data" novalidate>

    <div class="hero-unit">

        <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="Font"><i class="icon-font"></i><b class="caret"></b></a>
              <ul class="dropdown-menu">
              </ul>
            </div>
          <div class="btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li><a data-edit="fontSize 6"><font size="6">Grande</font></a></li>
              <li><a data-edit="fontSize 4"><font size="4">Normal</font></a></li>
              <li><a data-edit="fontSize 2"><font size="2">Pequeno</font></a></li>
              </ul>
          </div>
          <div class="btn-group">
            <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
            <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
            <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
            <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
          </div>
          <div class="btn-group">
            <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
            <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
            <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
            <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
          </div>
          <div class="btn-group">
            <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
            <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
            <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
            <a class="btn" data-edit="justifyfull" 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="Inserir Hyperlink"><i class="icon-link"></i></a>
                <div class="dropdown-menu input-append">
                    <strong>Inserir </strong>
                    <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                    <button class="btn" type="button"> Adicionar </button>
            </div>
            <a class="btn" data-edit="unlink" title="Remover Hyperlink"><i class="icon-cut"></i></a>

          </div>

          <div class="btn-group">
            <a class="btn" title="Inserir Imagem (ou assante e solte)" id="pictureBtn"><i class="icon-picture"></i></a>
            <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
          </div>
          <div class="btn-group">
            <a class="btn" data-edit="undo" title="voltar (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
            <a class="btn" data-edit="redo" title="seguir (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
          </div>
          <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
        </div>

        <textarea name="editor" style="display: none;"></textarea>


        <div id="editor">
          Escreva seu texto...
        </div>
      </div>
      <input type="button" class="btn btn-default" id="btn-enviar" value="Mostrar Resultado">    
    </form>

</div>
</body>
<script>
$('#btn-enviar').click(function(){    
    alert($(this).parents('div#editor').attr('getText'));

    //$("[name=editor]").val($(this).parents('div#editor').attr('getText'));

    // aqui vc atualiza o textarea antes do submit
    //$("[name=editor]").val($(this).parents('div#editor').attr('getText'));

    //$("[name=editor]").val($('#editor').html());

    $('#form_redacao').submit();    
});
</script> 

<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();
  });

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-37452180-6', 'github.io');
  ga('send', 'pageview');

  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "http://connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));


  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

</html>
php javascript jquery css

2 answers

1


Create a textarea hidden in the form. While doing Submit, play the contents of the editor’s div in that textarea.

Remove the name="editor" of the div and put in the textarea:

<div id="editor">
  Escreva seu texto...
</div>

<form method="POST" action="teste.php" name="form_redacao" id="form_redacao" onsubmit="return enviardados();" enctype="multipart/form-data" novalidate>

   <textarea name="editor" style="display: none;"></textarea>
   <input type="button" id="btn-enviar" value="Enviar">

</form>

<script>
$('#btn-enviar').click(function(){    

    // aqui vc atualiza o textarea antes do submit
    $("[name=editor]").val($("#editor").html());

    $('#form_redacao').submit();    
});
</script>

  • Sam, what happens when I make this request that you suggested is that Alert shows me a Undefined value. and it has one more detail... when I change the tag div for textarea the bootstrap-wysiwyg tools, they do not work

  • It is not to exchange the div for textarea, the answer does not say this :)... Try changing this $("[name=editor]").val($(this).parents('div#editor').attr('getText')); for this reason $("[name=editor]").val($('#editor').html());

  • I expressed myself badly. dike quiz that I made an attempt before changing div by a textarea more than I did the bootstrap-wysiwyg tools, now it doesn’t want to work..

  • how much code tidying you did above I have a doubt ! that div is to stay out of the same tag form ? because I am currently putting in..

  • You can leave it in or out, it makes no difference.

  • I just took the test here, unsuccessfully.. =/

  • put at the top of the post the full code.. maybe and is leaving something important aside..

  • I’ll take a look...

  • I tested it here and that’s right: the text of the editor you take with $("#editor").html()

  • worked using this one: <div name="editor" id="editor" class="editor">Write your text...</div> <textarea name="title-redaction" id="title-redaction" style=""></textarea>$("#redaction"). text($("#editor"). html());

  • After so much effort, it is a little unfair to cancel my answer. By marking your own answer you get nothing and I lose the 15pts. It was even my answer that inspired your.

  • You’re right, I’m still learning to use the platform, I don’t know if it makes any difference now but I rescheduled yours as the correct one again.. sorry about that, I will be more careful in the next publications !

Show 7 more comments

0

I tested a little different and ended up working.. follows what was done:

<!-- aqui fica o conteúdo a ser formatado  -->
<div name="editor" id="editor" class="editor">Escreva seu texto...</div>

<!-- aqui é onde o conteúdo será enviado via POST -->
<form method="POST" action="?paginas=teste" name="form_redacao" id="form_redacao" onsubmit="return enviardados();" enctype="multipart/form-data" novalidate>

  <!-- tag oculta que realiza a tarefa de enviar via POST -->
  <textarea name="redacao" id="redacao" style="display: none;"></textarea>        
  <br>
  <input type="submit" class="btn btn-default" id="btn-enviar" value="Mostrar Resultado">    
</form>

    <script> 
        /* converte o conteúdo da DIV em textarea e envia os dados via PSOT */

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

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

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

Browser other questions tagged php javascript jquery css

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