Hosting Solutions
mobile_logo Table of Contents

Building a WYSIWYG Rich Text Editor Textarea Replacement Part 1

Learn how to build a JavaScript WYSIWYG Rich Text HTML Editor textarea Replacement for your PHP and MySQL driven applications. In this first video we will construct our HTML and CSS based form that is ready to send data to a PHP parsing file waiting on our server. We will hide (but keep) our normal textarea element and replace it with an iFrame element. When the page loads into the browser we will use JavaScript laid out in the next video to turn the designMode on for that iFrame, so people can type into it and compose things. index.html <html> <head> <script src="wysiwyg/wysiwyg.js"></script> </head> <body onLoad="iFrameOn();"> <h2>My web application that intakes data from users</h2> <form action="my_parse_file.php" name="myform" id="myform" method="post"> <p>Entry Title: <input name="title" id="title" type="text" size="80" maxlength="80" /></p> <p>Entry Body:<br> <div id="wysiwyg_cp" style="padding:8px; width:700px;"> <input type="button" onClick="iBold()" value="B"> <input type="button" onClick="iUnderline()" value="U"> <input type="button" onClick="iItalic()" value="I"> <input type="button" onClick="iFontSize()" value="Text Size"> <input type="button" onClick="iForeColor()" value="Text Color"> <input type="button" onClick="iHorizontalRule()" value="HR"> <input type="button" onClick="iUnorderedList()" value="UL"> <input type="button" onClick="iOrderedList()" value="OL"> <input type="button" onClick="iLink()" value="Link"> <input type="button" onClick="iUnLink()" value="UnLink"> <input type="button" onClick="iImage()" value="Image"> </div> <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it --> <textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe> <!-- End replacing your normal textarea --> </p> <br /><br /><input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/> </form> </body> </html> my_parse_file.php <?php echo '<h2>You posted:</h2><hr />'. $_POST['title'] . '<hr />' . stripslashes($_POST['myTextArea']); ?>

JavaScript Videos

Form Programming

Contact Form Web Application Tutorial Ajax HTML5 PHPCheckbox Toggle Tutorial Select Deselect All ElementsIn Place Editing CMS Development HTML JavaScript TutorialCustom Progress Bar Meter Development For File Upload FormsMultiphase Form Programming Tutorial Multi StepRestrict Text Input Characters HTML JavaScript TutorialMonthly Payment Loan Calculator Form Programming TutorialDynamic Select Year List Script HTML Form ElementsTip Calculator Application Form Programming Tutorialtextarea Form Field Character Counting and LimitingBuilding a WYSIWYG Rich Text Editor Textarea Replacement Part 1Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2Div contenteditable Click Select All Text execCommand selectAllToggle Password Security Form Input Characters TutorialTrap User Check for Unsaved Written Work TutorialReal Time Text Input or Textarea Filter TutorialForm Select Change Dynamic List Option Elements Tutorial