所见即所得引导程序保存到数据库

Question

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

Answer 1

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.

Answer 2

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 #txteditor is 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.

Answer 3

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!