This is a basic tutorial on how to build a basic javascript editor, fora more advenced one try here http://melomind-tutorials.blogspot.com/2009/09/how-to-use-ajax.html
Lets start with a nice not very technical tutorial, one that I find really fun, How to build a rich text editor for the web
All the code here will be browser compatible.
The Rich text editors (RTE) for the web are build with iframes, this is how:
The javascript responsable of turning an iframe editable is:
document.getElementById('your iframe id').contentWindow.document.designMode="on";
the code now looks like:
The next step is to integrate the basic option for the editor, bold, italic, underlined for the text in the editor:
For that we are going to use the built in execcommade function like this:
document.getElementById('iView').contentWindow.document.execCommand('bold', true, null);
Ok good, now comes the part when we integrate the image insertion:
First there is the easy native way to do it:
document.getElementById('iView').contentWindow.document.execCommand(insertImage, false, "image source here");
But you can only insert an image with this function,you can not add or specify other attributes than the source (src=...), I will go throught these once done with the basics.
This is the code behind the editor, 5 kb of javascript, include the essential functions for a javascript editor
<style>
#linkbox{position:absolute;display:none;BORDER-RIGHT: 10px solid; PADDING-RIGHT: 0px; BORDER-TOP: 10px solid; PADDING-LEFT: 10px; LEFT: 0px; PADDING-BOTTOM: 10px; BORDER-LEFT: 10px solid; WIDTH: 280px; PADDING-TOP: 10px; BORDER-BOTTOM: 10px solid; BACKGROUND-COLOR: white;left:100px;top:100px}
#imagebox{position:absolute;display:none;BORDER-RIGHT: 10px solid; PADDING-RIGHT: 0px; BORDER-TOP: 10px solid; PADDING-LEFT: 10px; LEFT: 0px; PADDING-BOTTOM: 10px; BORDER-LEFT: 10px solid; WIDTH: 280px; PADDING-TOP: 10px; BORDER-BOTTOM: 10px solid; BACKGROUND-COLOR: white;TOP: 100px; LEFT: 100px}
input{ MARGIN-BOTTOM: 3px;}
#iframe_holder{position:relative}
</style>
<script language="javascript">
var range
var stored_type
var stored_range
var stored_content
function $(id){return document.getElementById(id)}
function dgcd(){return document.getElementById('iView').contentWindow.document}
function activate_iframe(){dgcd().designMode="on";
if(document.selection){
dgcd().onmouseup=function(){write_tree()}
dgcd().onkeyup=function(){write_tree()}
}else{dgcd().addEventListener('mouseup', function (e){write_tree()},true);}}
function format_text(type){dgcd().execCommand(type, false, null) }
function open_link(){
$('linkbox').style.display='block'
$('iframe_holder').appendChild($('linkbox'))
$('linkbox').style.left=$('iView').offsetLeft+100
$('linkbox').style.top=$('iView').offsetTop+100
}
function open_image(){
$('imagebox').style.display='block'
$('iframe_holder').appendChild($('imagebox'))
$('imagebox').style.left=$('iView').offsetLeft+100
$('imagebox').style.top=$('iView').offsetTop+100
}
function close_link(){$('linkbox').style.display='none'}
function close_image(){$('imagebox').style.display='none'}
}
if(range.item(0).src){$("image").value=range.item(0).src
$("image_alt").value=range.item(0).alt
}
}
stored_range=range//store the range to use it even when lost selection
stored_type = dgcd().selection.type//store the type for later use
//----------------------mozilla--------------------------
}else{
selObj = $("iView").contentWindow.getSelection();
$("tree").innerHTML=selObj.focusNode.parentNode.nodeName
var selRange = selObj.getRangeAt(0);
documentFragment = selRange.cloneContents();
var div = document.createElement("div");
div.appendChild(documentFragment);
$("image").value=div.childNodes[0].src
$("image_alt").value=div.childNodes[0].alt
if(div.childNodes[0].tagName=='IMG'){
$("tree").innerHTML=div.childNodes[0].tagName}
stored_type = div.childNodes[0].tagName//store the type for later use
stored_content=div.innerHTML//store the content of the selection for later use
}}
//----------------------------- mozilla link--------------
function mozilla_insert_link(){
if(selObj=='' && selObj.focusNode.parentNode.nodeName!="A"){close_link()}
This is how to dynamically create an elementwith javascript:
<script>
newEl = document.createElement('div') //creates a div element
newEl.setAttribute('id','newlayer') // set the attribute id for the created element to 'newlayer', any other attribute can be set that way
document.body.appentChild(newEl)
</script>
