Now you need to create an HTML Form to receive inputs from users. The HTML Form that you are going to make must contain a Text-area. We transform the Text-area to the CKEditor later. The next step is to add the CKEditor Hosted Javascript before the
</head> Tag. Just like the example that given below.
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
</head>
<body>
Now you need to name the "
Text-area" that you want to transform to CKEditor. For that, you need to use '
name' and '
id' attributes.
Example: <textarea name="text" id="text"></textarea>
Also after it, you need to add an Identifier Javascript that to transform the Text-area to CKEditor. You can follow the example that given below.
<textarea name="text" id="text">This is a demo .</textarea>
<script>
CKEDITOR.replace( 'text' );
</script>
You need to replace the 'text' with the name of your 'Text-area' otherwise it will not work correctly. After adding the Javascript, you can see the change happen in the page that you created for CKEditor. The Text-area that you created will change to CKEditor.
Step 3: Uploading Data from CKEditor to the Database:
Almost everyone thinks that it is very hard to upload the data from CKEditor to Mysql Database. It was not. It is very easy to Upload Data from CKEditor to the Database. All you want to do that make some condition in PHP and apply it them to the FORM page that you created. Just open your Mysql Database using PHPMYADMIN or the interface that you are using to manage Mysql Database and create a Database with name 'forum' and establish a Table with name 'ckeditor' with the below Mysql Query.
CREATE TABLE `ckeditor`(id int(10), file varchar(100));
Now you need take a look at the code with the full example that given right below this paragraph.
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
</head>
<body>
<?php
$con = @mysql_connect("localhost","root","");
$database = mysql_select_db("forum");
if(isset($_POST['submit']))
{
$file = $_POST['text'];
$query ="INSERT INTO `ckeditor`(`file`) VALUES ('$file')";
$result = mysql_query($query,$con);
if(!$result)
{
echo 'Record Not Saved';
}
else
{
echo 'Record Saved';
}
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<textarea name="text" id="text">This is a demo text.</textarea>
<script>
CKEDITOR.replace( 'text' );
</script>
<input type="submit" value="Save Changes" name="submit">
</form>
<?php
$query2 = "SELECT * from ckeditor";
$show = mysql_query($query2,$con);
while($row = mysql_fetch_array($show))
{
echo $row['file'];
}
?>
</body>
</html>
When a user clicks on the "
Submit" button. The user inputs inside the "
CKEditor" will upload to the "
Mysql Database" using the query that given below.
$query ="INSERT INTO `ckeditor`(`file`) VALUES ('$file')";
Here the "
$file" was indicating the input values that entered by the user to the "
CKEditor". If the data successfully uploaded to the "
Database" then you will get a message "
Record Saved" otherwise you will get an another message "
Record Not Saved".
Suggested Article for Programmers: