Tuesday 14 March 2017

Wysiwyg Editor

Wysiwyg Editor

WYSIWYG  is an acronym for "what you see is what you get". In computing, a WYSIWYG editor is a system in which content (text and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.

<?php 
$msg="";
if(isset($_POST['save']))
{
$string = str_replace(' ', '-', $_POST['fn']); // Replaces all spaces with h
yphens.
$file_name=preg_replace('/[^A-Za-z0-9\-]/', '', $string);
$fl=fopen("ps/". $file_name.".txt", "a") or die("Unable to open file!");
fwrite($fl,$_POST['text1']);
$msg ="<h3 style='color:green'>Data Saved</h3>";
   
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Girfa : Student Help :: What you see what you get</title>
<!-- this two java script file for WYSIWYG -->
 <script type="text/javascript" src="nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
  </script>

</head>
<body>

<h1 align="center"> What you see what you get</h1><hr />
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Enter File Name : <input type="text" name="fn" /><br /><br />

<textarea id="text1" name="text1" rows="25" cols="85"></textarea>
<br />
<input type="submit" value="Save" name="save" />
</form>
<?php echo $msg;?>
</body>
</html>

Use with HTML

if you want to use editor with some other language instead of PHP or you want to pass genreated HTML code with ajax then you will need to access generated HTML code with jquery.

The Editor will disable textarea and puts you code in a division through java script. division which store HTML code uses class named nicEdit-main. So following code help you to get generated HTML code.

$(".nicEdit-main").html()

No comments:

Post a Comment