ZKCompRef_CKEditor2

Implements cKeditor and save data using PHP

Posted on Posted in PHP, Technology

Folks, it’s time to learn how to implements most widely used editor i.e CKEditor. Most of the time while building projects we require the editor to format HTML like blogging project. The HTML formatted content can quickly upload to the database. By using the editor, the user can quickly format the text content align, bold, italic, etc. So we learn how to implement this kind of editor in PHP pages and upload the HTML content in the editor to the Database. Similarly, we fetch the HTML content from database and list respectively.

First of all, what is CKEditor?
CKEditor (formerly FCKEditor) is an open source WYSIWYG text editor designed to bring common word processor features directly to a web page, Simplifying the content creation.

Step I:- HTML form and implements CKEditor

<!DOCTYPE html>
<html>
	<head>
		<title>Implements cKeditor in PHP file</title>
		<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
	</head>

Now you need to add an Identifier Javascript that will transform the Text-area to CKEditor. You can follow the example that given below.

<textarea name ="text" class="form-control" id="textArea" rows="3" placeholder="Textarea"></textarea>
<script>
//Load editor and replace it with textarea
CKEDITOR.replace( 'textArea' );
</script>

For better understanding, follow below PHP file.

<!DOCTYPE html>
<html>
	<head>
		<title>Implements cKeditor in PHP file</title>
		<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<div class="bs-example" data-example-id="basic-forms">
				<form action="saveEditor.php" enctype="multipart/data" method="post">
					<div class="form-group"> 
						<label for="exampleInputEmail1">Editor</label>
						<textarea name ="text" class="form-control" id="textArea" rows="3" placeholder="Textarea"></textarea>
					</div>
					 <input type="submit" class="btn btn-primary" name="submit" value ="Submit">
				</form>
			</div>
		</div>
	</body>
	<script>
		//Load editor and replace it with textarea
		CKEDITOR.replace( 'textArea' );
	</script>
</html>

So, this will implement the editor. Now uploading data from editor to database.

$query ="INSERT INTO `ckeditor`(`files`) VALUES ('$file')";

Now you need to take a look at the code with the full example that given below.

<!DOCTYPE html>
<html>
	<head>
		<title>Implements cKeditor in PHP file</title>
		<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="container">
			<?php
			$dbCon = @mysql_connect("localhost","root","");
			$database = mysql_select_db("ckeditor");
			if(isset($_POST['submit']))
			{
				$file = $_POST['text'];
				$query ="INSERT INTO `ckeditor`(`files`) VALUES ('$file')";
				$result = mysql_query($query,$dbCon);
				$query2 = "SELECT * from ckeditor ORDER BY id DESC";
				$show = mysql_query($query2,$dbCon);	
				
				if(!$result)
				{
					echo '<div class="alert alert-danger">
							<strong>Fail!</strong> Record not saved!!
						  </div>';
				}
				else
				{
					echo '<div class="alert alert-success">
							<strong>Success!</strong> Record Saved!!
						  </div>';
				}
			}
			?>
			<div class="bs-example" data-example-id="contextual-table">
				<table class="table">
					<thead>
						<tr>
							<th>S. No.</th>
							<th>Editor Data</th>
						</tr>
					</thead>
					<tbody>
						<?php 
						$i = 1;
						while($row = mysql_fetch_array($show))
						{ ?>
						<tr class="info">
							<th scope="row"><?php echo $i; ?></th>
							<td><?php echo  $row['files']; ?></td>
						</tr> 
						<?php $i++; }	?>
					</tbody>
				</table>
			</div>
		</div>
	</body>
</html>

Basically we have two files one is editor.php and second one is saveEditor.php. Second file is responsible for inserting data from editor to database. You can download these two files from Here.

Except these files, one SQL file is there which helps you to check the insert editor content and fetch logic from database. Simply import this SQL file. Just let me know if any issue occurs while implementing this project.