FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2

Published :
Author :
Adam Khoury
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(); }