Building your own Java Script Editor (Part 1 of 3)
few Months ago I had a situation in which i needed to build my own editor that will accept certain tags and attributes. I thought it would be very interesting to share how I built my editor in a browser independent way.
The first thing that came up to my mind then was what will be the container of my designer an IFrame a div or what then I decided that I will make it a div that I will set it’s contentEditable attribute to true.
The second thing was ok now my div could be edited by the end user in the design time how will I apply the tags to the selected content below you will find a utility library I have built that have the basic misc methods we will need built the editor in the next part I will show and explain the Editor Class for now let’s start up with the important methods in the utility library. (you could download it from here)
GetSelectedRange : function(controlContent){
var selectedRange = null;
if(document.selection)
selectedRange = document.selection.createRange();
else if(window.selection)
selectedRange = window.selection.createRange();
if(selectedRange == null){
if(window.getSelection() != null)
{
if (Exists(window.getSelection().getRangeAt))
selectedRange = window.getSelection().getRangeAt(0);
else { // Safari!
var range = document.createRange();
range.setStart(window.getSelection().anchorNode,
window.getSelection().anchorOffset);
range.setEnd(window.getSelection().focusNode,
window.getSelection().focusOffset);
selectedRange = range;
}
}
}
var t = null;
if(selectedRange != null && BrowserType.IE)
{
//Check if the range is within the editor div range
t = CheckParentById(controlContent.id,
selectedRange.parentElement());
}
else{
//Check if the range is within the editor div range
t = RangeCompareNode(selectedRange,controlContent);
}
if(!t && controlContent != null)
selectedRange = null;
return selectedRange;
}
The above code gets the selected range object in a browser independent way in order to work on it later on in the editor then it’s check if the selected range is within our editor div range if it’s not then return null otherwise return the range.
Here we check if the range is withing a parent node or not for browsers other than IE
// This function is used to get if the selected range in the required parent in firefox.
RangeCompareNode : function(range,node){
var nodeRange = node.ownerDocument.createRange();
try {
nodeRange.selectNode(node);
}
catch (e) {
nodeRange.selectNodeContents(node);
}
var nodeIsBefore = range.compareBoundaryPoints(Range.START_TO_START, nodeRange) == 1;
var nodeIsAfter = range.compareBoundaryPoints(Range.END_TO_END, nodeRange) == -1;
if (nodeIsBefore && !nodeIsAfter)
return false;
if (!nodeIsBefore && nodeIsAfter)
return false;
if (nodeIsBefore && nodeIsAfter)
return true;
return false;
}
Here we check if the range is withing a parent node or not for IE Browser
// This function is used to Check whether a parent element contains the child element or not using the parentId.
CheckParentById : function(parentId,child){
while(child != null){
if(child.id == parentId) return true;
child = child.parentNode;
}
return false;
}
Next part I will put the editor class and highlight the main parts of it with a demo of the editor working.
Short URL for this post: http://bit.ly/13XSQj
Comments
Leave a Reply