Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2

Learn how to build a JavaScript WYSIWYG Rich Text HTML Editor textarea Replacement for your PHP and MySQL driven applications. In this second video we will script our wysiwyg.js file and code out all of the functions that our HTML form is ready to call. We make use of the execCommand() method in JavaScript and all of its Command Identifiers to apply specific formatting we desire to our WYSIWYG editor. Our form is submit using JavaScript so we can transfer the data frome our iframe into our textarea for the normal form action to work. The form can also be submit using Ajax if you prefer, then there would be no need to transfer data from the iframe into the textarea. In part 3 we discuss the PHP and MySQL side of things, security, and filtering. wysiwyg.js function iFrameOn(){ richTextField.document.designMode = 'On'; } function iBold(){ richTextField.document.execCommand('bold',false,null); } function iUnderline(){ richTextField.document.execCommand('underline',false,null); } function iItalic(){ richTextField.document.execCommand('italic',false,null); } function iFontSize(){ var size = prompt('Enter a size 1 - 7', ''); richTextField.document.execCommand('FontSize',false,size); } function iForeColor(){ var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', ''); richTextField.document.execCommand('ForeColor',false,color); } function iHorizontalRule(){ richTextField.document.execCommand('inserthorizontalrule',false,null); } function iUnorderedList(){ richTextField.document.execCommand("InsertOrderedList", false,"newOL"); } function iOrderedList(){ richTextField.document.execCommand("InsertUnorderedList", false,"newUL"); } function iLink(){ var linkURL = prompt("Enter the URL for this link:", "http://"); richTextField.document.execCommand("CreateLink", false, linkURL); } function iUnLink(){ richTextField.document.execCommand("Unlink", false, null); } function iImage(){ var imgSrc = prompt('Enter image location', ''); if(imgSrc != null){ richTextField.document.execCommand('insertimage', false, imgSrc); } } function submit_form(){ var theForm = document.getElementById("myform"); theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML; theForm.submit(); }

JavaScript Videos

Form Programming

Checkbox Toggle Tutorial Select Deselect All ElementsCustom Progress Bar Meter Development For File Upload FormsMultiphase Form Programming Tutorial Multi StepMonthly Payment Loan Calculator Form Programming TutorialDynamic Select Year List Script HTML Form ElementsTip Calculator Application Form Programming TutorialIn Place Editing CMS Development HTML JavaScript 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
Top of Page
Home Page
Table of Contents
Donate / Support
Web Hosting
Terms of Use
© 2015 All Rights Reserved