wysiwyg editor for dummies

I was working on a web application recently and faced some serious issues using WYSIWYG editor. For those who don’t know what WYSIWYG editor is; the editor turns your text area to a live editor where you have the option to change the format of text, insert images, videos and other necessary changes as we are doing in Microsoft word. You can’t, actually, turns everything from the editor to a word format but to some extent you can play around with string and media.

“WYSIWYG acronym for what you see is what you get

There are plenty free interactive editors to be used in your application. All of them have different configuration and limitations. Some of them are as follow.

By using these editors you can store the values in database and retrieve them as well. Let’s create a dummy page where you can install the editor, save the data in mysql database and retrieve it.

Creating database and table

To understand the structure and usage of the editor I will create a database editor and a table posts with the following fields

  • Post_id
  • Title
  • Body
  • Date

Screenshot_2

Make sure to use LONGTEXT type for body as we will store long text in this field (even hundred pages of text).

Connect PHP file with database

In order to perform various operations from editor to mysql we need to connect our PHP application to the database. I recommend using PDO for connectivity but for beginners I will use the old and simple database connectivity functions.

Config.php

<?php
$conn = mysql_connect("localhost", "moxet", "pakistan");
mysql_select_db("editor", $conn) or die("Error connecting database! Over.");
?>

After creating config.php we will start from index.php where we will include WYSIWYG editor in head section. I will use CKEditor as an example editor. There are 3 packages of CKEditor depends on various features and functionarlityes. You can download the zip file or include the JavaScript library directly from the CDN. I am using full package and including the JavaScript from the CDN.

CKEditor Packages

 

Make sure to assign ID to textarea and call the same id in script section. In the following example we are using myeditor as ID. As we are going to save the content of editor in sql file we need another php file save.php to perform insertion.

index.php

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>myEditor</title>
 <script src="//cdn.ckeditor.com/4.5.9/full/ckeditor.js"></script>
 </head>
 <body>
 <form method="POST" action="save.php">
 <textarea name="myeditor" id="myeditor" rows="10" cols="80">
 Pakher! We are building a simple editor.
 </textarea>
 <script>
 CKEDITOR.replace('myeditor');
 </script>
 </form>
 </body>
</html>
You can utilize all the tools in editor menu like bold, italic, pictures and bullets.

In save.php we need to include config file to connect php with mysql. After connectivity the content from index file will be stored in a variable and further in mysql. You have to trim and use htmlstripslashes in order to get clean html code for your body.

save.php

<?php
include 'config.php';
$title = trim($_POST["title"]);
$body = mysql_real_escape_string($_POST["myeditor"]);
$date = date("d M, Y H:i:s");
mysql_query("INSERT INTO posts VALUES('','$title','$body','$date')");
echo $title." has been added.";
?>

After adding your content to the database, you can retrieve it with view.php page. As sample I will get the post details for a specific post id only. You can make a list of post and then retrieve one by one or according to your need. Mostly the well known CMS are using the same concept but they are integrating the editor with various secure functions in order to save the CMS from hacking attempts.

View.php

<?php
include 'config.php';
$query = mysql_query("SELECT * FROM posts WHERE post_id=1");
$post = mysql_fetch_array($query);
echo "<h1>".$post['title']."</h1>";
echo "<div>".$post['body']."</div>";
echo "<hr/><p>Posted on : ".$post['date']."</p>";
?>

The final view of post fetched from database.

Conclusion:

WYSIWYG editors are common editors and mostly used by popular CMS like WordPress and Joomla. If you want to create your own CMS, web-application or news portal where user can add dynamic contents in a rich text editor you can use these editors. The more you customize the editor the more it will be secure and easy to use. At any point you can change the styles, skins, css and buttons of the editor. Complete documentation of CKEditor is live and developer can tune the editor according to their needs. The tutorial was for a beginners user only; there might be some syntax, functions or scenario which can cause security issues that’s why I suggest to use the latest functions to secure database and contents.

If you have any question for customization or advance usage feel free to drop your opinion in comments.

Comments

comments

Comments closed