Enhancing Web Forms with TinyMCE: WYSIWYG Editor Techniques

1. Useful Techniques Mozafar Bag-Mohammadi

2. Outline • TinyMCE • Useful function • Form Design

3. TinyMCE • TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor • It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. • TinyMCE is very easy to integrate into other Content Management Systems and your web site.

4. TinyMCE examples • Full featured example • TinyMCE in its simplest form • Various skins • Word processor

5. Form Design • Use conventional editor and create your form. • mark unknown content (such as $titile) with proper PHP variable

6. A function for displaying designed forms function ShowForm($FileName){ $out = ''; $lines = file($FileName); $k=0; foreach ($lines as $l_num => $line) { //echo $line; if (preg_match("/<form/",$line)) $k=1; if ($k==1)$out .= $line; if (preg_match("/</form>/",$line)) $k=0; //$out .= $k; } return $out; }

7. Dynamic display element • Use conventional editor for design of element • Mark variable part (such as $titile) with proper PHP variable

8. Editable content HTML Code

9. A function for displaying element function ShowHTML($FileName){ $lines = file($FileName); foreach ($lines as $l_num => $line) $out .= $line; $pieces = explode("<!--1-->", $out); $out=$pieces[1]; return $out; }

10. Query construction function makeQuery($args){ //echo 'Connected successfully'; $query=''; foreach ($args as $key => $q) { $query .=' '; $query .=$q; } //echo "query= $query"; return $query; }

11. Result Display function GetResult($args){ $a=''; $a.= "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">"; $bgcolor='#6699CC'; $k=0; if (!$args) $a .='<p align="right" dir="rtl">هیچ ردیفی پیدا نشد.</p>'; while ($result_row = mysql_fetch_array($args, MYSQL_ASSOC)) { if ($k==0) { $k=1; $a.= "<tr bgcolor=\"#669933\">"; foreach ($result_row as $key => $val) { $a.= "<td width=\"10%\"> $key </td>"; } $a.= '<tr>'; } $a.= "<tr bgcolor=\"$bgcolor\">"; foreach ($result_row as $key => $val) { $a.= "<td width=\"10%\"> $val </td>"; } $a.= '<tr>'; if ($bgcolor == '#6699CC') $bgcolor='#6633CC'; else $bgcolor='#6699CC'; } $a.= "</table>"; return $a; }

12. Sample output of previous Code

13. Result display with edit & delete capability function EditResult($EditPage,$AddPage, $t_key, $res){ $a.= '<table border="1" cellpadding="0" cellspacing="0" align="center" width="100%">'; $bgcolor='#6699CC'; $k=0; while ($result_row = mysql_fetch_array($res, MYSQL_ASSOC)) { if ($k==0){ $k=1; $a.= "<tr bgcolor=\"#669933\">"; foreach ($result_row as $key => $val) { if ($key != $t_key) $a.= "<td width=\"20%\">$key</td>"; else { $a.= "<td > Delete </td>"; $a.= "<td > Edit </td>"; } } $a.= '<tr>'; } $a.= "<tr bgcolor=\"$bgcolor\">";

14. Result display with editing capability foreach ($result_row as $key => $val) { if ($key != $t_key) $a.= "<td width=\"20%\">$val</td>"; else{ $DelImg= '<img src="./etc/delete.bmp" alt=" " align="center">'; $EditImg= '<img src="./etc/edit.bmp" alt=" " align="center">'; $a.= "<td ><a href=\"$EditPage?order=$val\">$DelImg</a></td>"; $a.= "<td ><a href=\"$AddPage?key=$val\">$EditImg</a></td>"; } } $a.= '<tr>'; if ($bgcolor == '#6699CC') $bgcolor='#999999'; else $bgcolor='#6699CC'; } $a.= "</table>"; return $a; }

15. Sample Output

16. AddContent.php <?php require_once('../lib/definitions.php'); require_once('../lib/login.php'); require_once('../lib/functions.php'); $site_title = "Adminstration"; $page_title = "مطلب جدید"; $main .= ''; if (empty($_SESSION['user'])) { $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'login.php'; header("Location: http://$host$uri/$extra"); exit; } else{ $key=$_GET["key"]; if(empty ($_POST["submit"])) $main .= ShowContentForm($key);

17. AddContent.php (cont) else{ //submit is true if (!$db_conected){ db_Connect(); } $title =$_POST["title"]; $section =$_POST["sec"]; $num =$_POST["num"]; $content =$_POST["content"]; $date=date("Y-m-d"); if ($_GET["key"]=='-1') $q1 = array('insert into cs_content values (NULL,',"'$num',","'$section',","'$title',","'$date',","'$content');"); else $q1 = array('update cs_content set title=',"'$title', date=","'$date', num=","'$num', content=","'$content' where Ct_id=","$key;"); $q=makeQuery($q1); $result=mysql_query($q); $q1 = array('select title, date, section, num from',' cs_content ;'); $q=makeQuery($q1); $result=mysql_query($q); $main .=GetResult($result); $main .= '<a href="AddContent.php">New Post</a>'; $main.= "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"; $main .= '<a href="EditContent.php">Edit</a>'; } require('etc/header.php'); require('etc/admin_menu.php'); require('etc/templates.php'); } ?>

18. EditContent.php require_once('../lib/definitions.php'); require_once('../lib/login.php'); require_once('../lib/functions.php'); $site_title = "Adminstration"; $page_title = "ویرایش مطالب"; global $user; if (empty($_SESSION['user'])) { $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'login.php'; header("Location: http://$host$uri/$extra"); exit; } else { if(empty ($_GET["order"])) { if (!$db_conected){ db_Connect(); } $main.='<h5>لیست مطالب اضافه شده</h5>'; $q1 = array('select Ct_id, title, num, date, section from',' cs_content ;'); $q=makeQuery($q1); $result=mysql_query($q); $main .=EditResult('EditContent.php','AddContent.php', 'Ct_id', $result); $main .= '<a href="AddContent.php">مطلب جدید</a>'; }

19. EditContent.php (cont) else { $key = $_GET["order"]; if (!$db_conected){ db_Connect(); } $q1 = array('delete from cs_content',"where Ct_id=$key;"); $q=makeQuery($q1); $result=mysql_query($q); $q1 = array('select Ct_id, title, num, date, section from',' cs_content ;'); $q=makeQuery($q1); $result=mysql_query($q); $main .= EditResult('EditContent.php','AddContent.php','Ct_id', $result); $main .= '<a href="AddContent.php">مطلب جدید</a>'; } require('etc/header.php'); require('etc/admin_menu.php'); require('etc/templates.php'); } ?>

20. Others • Install your web site with a proper php file • Create admin account • Web Site setting • Create tables