wysiwyg bootstrap save to database

8k views Asked by At

I am unable to save content written inside the editor to my database.

I have noticed that if i change the div to textarea, it saves just fine to the database. But that 'solution' removes the functionality of the wysiwyg and is unable to save in rich data format, which I need.

So how do I save to my database with divs?

Heres my code:

<form method="post" action="index.php">
      <div id="editor" name="test">
        <?

  $sql = "SELECT blaabog FROM brugere WHERE id='1'";
  $result = $conn->query($sql);

      while($row = $result->fetch_assoc()) {
          echo $row["blaabog"];
      }

  ?>
</div>
      <button class="btn btn-default" type="submit">Send Post</button>
    </form>

If I change my code to this, it saves to the database, but as described above ruins other functionality..

<form method="post" action="index.php">
      <textarea id="editor" name="test">
        <?

  $sql = "SELECT blaabog FROM brugere WHERE id='1'";
  $result = $conn->query($sql);

      while($row = $result->fetch_assoc()) {
          echo $row["blaabog"];
      }

  ?>
</textarea>
      <button class="btn btn-default" type="submit">Send Post</button>
    </form>

How do I fix this so I am able to save to my database in rich data format?

Thanks

3

There are 3 answers

1
jonx333 On BEST ANSWER

If someone has the same problem I have a solution:

I changed my wysiwyg editor to TINYmce, which stores the information in the database just fine with the following code:

Editor code:

 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

PHP:

  // Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}


if(isset($_POST['text'])) {


  $text = $_POST['text'];




  $sql = "UPDATE users SET blaabog = '" . $text . "' WHERE id = 1";

  if ($conn->query($sql) === TRUE) {
  echo "Record updated successfully";
  } else {
  echo "Error updating record: " . $conn->error;

} }

?>

And some more PHP:

<form method="post">
            <textarea name="text">
                                      <?

            $sql = "SELECT * FROM users WHERE id=1";
            $result = $conn->query($sql);

                while($row = $result->fetch_assoc()) {
                    echo $row["blaabog"];
                }

            ?>
          </textarea>
        </div>
        <div class="widget-container">
          <div class="widget-content">
              <div class="form-content">
                <div id="response"></div>
              </div>
              <div class="form-footer">
              <input type="submit" class="btn btn-success primary-btn" value="Gem blÄ bog">
              </div>
            </form>

I am not sure how but the code above works. I bought a solution from a professional - so sorry if my explaination is bad.

Anyway, if you have the same problem as me, the code above should do trick!

4
LetsSeo On

In order to get the contents of the richtext editor to submit to a PHP page:

Create a hidden text input on the same page as the richtext editor, in the same form.

Then add an onSubmit function to your form that copies the contents of the div to the hidden text input.

It would look something like:

<form name="my_form" method="post" onSubmit="document.my_form.editor_contents.value = $('#editor').html()" action="index.php">

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

      <div id="editor" name="test">
        <?

  $sql = "SELECT blaabog FROM brugere WHERE id='1'";
  $result = $conn->query($sql);

      while($row = $result->fetch_assoc()) {
          echo $row["blaabog"];
      }

  ?>
</div>
      <button class="btn btn-default" type="submit">Send Post</button>
    </form>

note Don't forget this time you must save the editor_contents to database.

0
youngdero On

just add the onclick event something like this

<button onclick=" $('#txtEditor').val($('.Editor-editor').html());" class="btn btn-default" type="submit">Send Post</button>

note the #txteditoris the id of your form once this is done you will get the functionality of the wysiwyg. to play around with it you can change the .html to .text and it will save to database but without the the functionality of the wysiwyg.