All about ckeditor and how to integrate in website.

home.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page </title >
<meta http-equiv="content-type" content="text/html; charset=utf-8"/ >
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="posteddata.php" method="post">
<textarea id="editor1" name="editor1">
<p>Your text goes here</p>
</textarea>
<script type="text/javascript">
window.onload = function()
{CKEDITOR.replace( 'editor1' );};
</script>
<input type="submit" value="Submit"/ >
</form>
</body>
</html>

posteddata.php
<html><body>
<?php
echo $_POST['editor1'];
?>
</body></html>

ref. http://stackoverflow.com/questions/6545521/ckeditor-how-do-i-save-to-the-web-page-i-am-editing?rq=1

Saving CKEditor data to MySQL Database

Follow these steps. I use a MySQL table called mybase to store the content you want to save (and perhaps reload) that I call mytext
Main document (you can call it main.php)
<!DOCTYPE html>
<title>Save inline stuff</title>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<?php
//you must enter your own connexion details here
$host   = 'host';
$dbuser = 'dbuser';
$dbpass = 'dbpass';
$dbname = 'dbname';
$dbconn = mysql_connect($host, $dbuser, $dbpass)
or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($dbname, $dbconn);
mysql_query("SET NAMES UTF8");

$query = mysql_query("SELECT mytext FROM mybase ");
$row = mysql_fetch_assoc($query);
$mytext = $row['mytext'];
echo "When you click outside the editing area after editing the content of the area is saved to the MySQL table<br><br>";
echo "<div style='border:2px solid;border-radius:25px;' id='mytext' contenteditable='true' onBlur='clickheretosave()'>" . $mytext . "</div>";
echo "<br>If you are successfull you should see that the <b>mytext</b> is also reloading when you hit F5";
?>
<script type='text/javascript' language='javascript'>
// <![CDATA[
function clickheretosave () {
var mytext = CKEDITOR.instances.mytext.getData();
       $.post('mybase.php', {
     mytext : mytext
     })
    }
// ]]>
</script>
</body>
</html>
In a separate file called mybase.php add the following code - you must of course fill in your own connection details for the database:
<?php header('Content-type: text/html; charset=UTF-8');
$host   = 'host';
$dbuser = 'dbuser;
$dbpass = 'dbpass;
$dbname = 'dbname';
$dbconn = mysql_connect($host, $dbuser, $dbpass)
or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($dbname, $dbconn);
mysql_query("SET NAMES UTF8");
$sql = "UPDATE mybase SET mytext ='" . stripslashes($_POST['mytext']) . "'";
$queryresource = mysql_query($sql, $dbconn) or die(mysql_error());
?>
I have testet the code so it should work, but you need to create the database table also.

------------------------------------------
NAME tag is for PHP.
ID tag is for javascript and for css used as #
class is for css used as "." DOT
------------------------------
ADD INTO DB

home.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page </title >
<meta http-equiv="content-type" content="text/html; charset=utf-8"/ >
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>

<form method="post" action="add.php">
<table width="958" height="372">
<tr>
    <td width="69">Name:</td>
    <td width="608"><input name="textfield" type="text" id="textfield" size="40" /></td>
</tr>

<tr>
    <td>Section:</td>
    <td><select name="select" id="select">
    </select></td>
</tr>
<tr>
    <td>Subject:</td>
    <td><select name="select2" id="select2">
    </select></td>
</tr>
<tr>
    <td height="53">Description</td>
    <td><textarea name="textarea" id="textarea" cols="45" rows="3"></textarea></td>
</tr>
<tr>
    <td>Upload</td>
    <td>
      <label for="fileField"></label>
      <input name="fileField" type="file" id="fileField" size="40" />
    </td>
</tr>
<tr>
    <td> </td>
    <td>
      <label for="textarea2"></label>
      <textarea class="ckeditor" cols="20" id="editor1" name="editor1" rows="10"></textarea>
</td>
</tr>
<tr>
    <td> </td>
    <td>
      <input type="submit" name="button2" id="button2" value="Upload" />
    </td>
</tr>
</table>

</form>
</body>
</html>

--------------
mysql.php

<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("ckeditor",$con);
?>

-----------------
add.php

<?php
include("mysql.php");

if(isset($_POST["button2"]))
{
$sql="INSERT INTO qpaper (papername,subject,section,description,upload,uploadtext)
VALUES
('$_POST[textfield]','$_POST[select]','$_POST[select2]',
'$_POST[textarea]','$_POST[fileField]','$_POST[editor1]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
else
{
echo "Question paper uploaded Successfully";
}

}

?>

------------
table fields

papername,subject,section,description,upload,uploadtext

Learn 2 Programming

Search Google

Wednesday 9 July 2014

Integrating CKeditor in websites and saving document

Saving CKEditor data to MySQL Database

No comments:

Post a Comment