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();
}