Posting MySQL data back to the CKEditor instance

May 3rd, 2012

Hello,

This a follow-up to the post,  Saving CKEditor data to MySQL Database, that shows how to bring the data back from the MySQL database into the CKEditor instance.  This is fairly simple to accomplish, so I will post the code for the updated page and then go through the new code step by step and explain what is happening!

<?php
  // include the database configuration file
  include 'includes/config.inc.php';
  // make the connection using the credentials from the include file
  $dbConn = mysql_connect($host, $dbUser, $dbPass)
             or trigger_error(mysql_error(), E_USER_ERROR);
  // select the database for use
  mysql_select_db($dbName, $dbConn);
  /* Table: messages
   * Fields: id (INT, primary key, auto-increment)
   * message (TEXT)
   */
  // select the most recent message
  $sql = "SELECT * FROM messages ORDER BY id DESC LIMIT 0,1";
  // query the database, returning a resource containing the data
  $queryResource = mysql_query($sql, $dbConn) or die(mysql_error());
 ?>
<!DOCTYPE html>
<html>
  <head>
    <title>Writer</title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <style>
      .cke_contents {
        height: 400px !important;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        CKEDITOR.replace( 'editor',
          {
           fullPage : true,
           uiColor : '#9AB8F3',
           toolbar : 'MyToolbar'
          });
      });
    </script>
  </head>
  <body>
    <form action="result.php" method="post">
      <?php
        while ($row = mysql_fetch_assoc($queryResource)) {
          $content = $row['message'];
        }
      ?>
      <textarea class="editor" id="editor" name="editor"><?php echo $content; ?></textarea>
      <div id="messages"></div>
    </form>
  </body>
</html>

At the top of the file, you will notice that I created an include file that provides all the database connection information.  By doing this, I have a central location to change my credentials in one place instead of having to search through all my files to find them.  This can be a huge time saver if you are working on a project with many files…

  // include the database configuration file
  include 'includes/config.inc.php';

Then, using the credentials from the config file, I establish a connection to the database…

  // make the connection using the credentials from the include file
  $dbConn = mysql_connect($host, $dbUser, $dbPass)
             or trigger_error(mysql_error(), E_USER_ERROR);
  // select the database for use
  mysql_select_db($dbName, $dbConn);

which I then use to query against and retrieve the data we wish to display in our CKEditor…

  // select the most recent message
  $sql = "SELECT * FROM messages ORDER BY id DESC LIMIT 0,1";
  // query the database, returning a resource containing the data
  $queryResource = mysql_query($sql, $dbConn) or die(mysql_error());

Now, we skip down into the <body> section and pull the data back out of the query resource and put it in a variable named $content…

      <?php
        while ($row = mysql_fetch_assoc($queryResource)) {
          $content = $row['message'];
        }
      ?>

Finally, we echo the $content variable out into the textarea and let CKEditor pull it in!

      <textarea id="editor" name="editor"><?php echo $content; ?></textarea>

I hope you enjoy this tutorial and ask you to comment if it isn’t clear to you.

Thanks,
Bud Manz

http://www.manzwebdesigns.com/

Where your web comes to life!

Posted in Information, Tutorials | No Comments »

« Older Entries