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'}
function write_tree(){
$("link").value=''
$("link_title").value=''
$("image").value=''
$("image_alt").value=''
if(document.selection){//IE
range = dgcd().selection.createRange();
//------------------------------------------------
if(dgcd().selection.type!="Control"){
$("tree").innerHTML=range.parentElement().tagName
if(range.parentElement().tagName=="A"){
$("link").value=range.parentElement().href
$("link_title").value=range.parentElement().title
}
}else {
$("tree").innerHTML=range.item(0).tagName
if(range.item(0).parentElement.href){$("link").value=range.item(0).parentElement.href
$("link_title").value=range.item(0).parentElement.title
}
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
if(selObj.focusNode.parentNode.nodeName=="A"){$("link").value=selObj.focusNode.parentNode.href
$("link_title").value=selObj.focusNode.parentNode.title
//open_link()
//$('linkbox').style.left=selObj.focusNode.parentNode.offsetLeft+10+'px'
//$('linkbox').style.top=selObj.focusNode.parentNode.offsetTop+40+'px'
}else{close_link()}
if(selObj.focusNode.nodeName=="A"){document.getElementById("link").value=selObj.focusNode.href
document.getElementById("link_title").value=selObj.focusNode.title
//open_link()
//$('linkbox').style.left=selObj.focusNode.parentNode.offsetLeft+10+'px'
//$('linkbox').style.top=selObj.focusNode.parentNode.offsetTop+40+'px'
}//or add ,open_link() here
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()}
if(selObj=='' && selObj.focusNode.parentNode.nodeName=="A"){
thenode = selObj.anchorNode.parentNode
range = document.createRange();
range.selectNode(thenode);
selObj.addRange(range);
HTML="<a href="+$('link').value+" title="+$("link_title").value+">"+selObj+"</a>"
dgcd().execCommand("inserthtml", false, HTML);
close_link()
}
if(selObj!=''){
HTML="<a href="+$('link').value+" title="+$("link_title").value+">"+selObj+"</a>"
dgcd().execCommand("inserthtml", false, HTML);
close_link()
}
if(stored_type=='IMG'){
HTML="<a href="+$('link').value+" title="+$("link_title").value+">"+stored_content+"</a>"
dgcd().execCommand("inserthtml", false, HTML);
close_link()
}
}
//--------------------------------IE link
function IE_insert_link(){
dgcd().body.focus();
if(stored_type!='Control'){
if(range.htmlText==''){close_link()}
if(range.htmlText=='' && range.parentElement().tagName=="A"){
range.parentElement().href=$("link").value
range.parentElement().title=$("link_title").value
close_link()
}
if(range!=''){
stored_range.select()
dgcd().execCommand('createLink',false,$("link").value)
stored_range.parentElement().title=$("link_title").value
close_link()
}
}else{
stored_range.select()
dgcd().execCommand('createLink',false,$("link").value)
stored_range.item(0).parentElement.title=$("link_title").value
close_link()
}
}
//-------------------insert link
function insert_link(){
if(document.selection){
if(range || stored_range){IE_insert_link()}else{close_link()}
}else{
mozilla_insert_link()
}
}
//----insert image
function insert_image(){
if(document.selection){
if(range || stored_range){IE_insert_image()}else{close_image()}
}else{
mozilla_insert_image()
}
}
function IE_insert_image(){
stored_range.select()
dgcd().execCommand('insertImage',false,$("image").value)
range = dgcd().selection.createRange();
range.item(0).alt=$("image_alt").value
stored_range=range
close_image()
}
function mozilla_insert_image(){
//dgcd().execCommand('insertImage',false,$("image").value)
HTML="<img src="+$('image').value+" alt="+$("image_alt").value+">"
dgcd().execCommand("inserthtml", false, HTML);
close_image()
}
function alert_link(){
alert(dgcd().body.innerHTML)
}
window.onload = activate_iframe;
</script>
<input class="UI_button" id="Button1" onclick="format_text('bold')" type="button" value="bold" /><input class="UI_button" id="Button2" onclick="format_text('italic')" type="button" value="italic" /><input class="UI_button" id="Button3" onclick="format_text('underline')" type="button" value="underline" /><input class="UI_button" id="Button3" onclick="open_link()" type="button" value="link" /><input class="UI_button" id="thtml" onclick="alert_link()" type="button" value="html" /><input class="UI_button" onclick="open_image()" type="button" value="image" />
<div id="linkbox">
<input id="link" size="33" style="height: 22px; width: 268px;" />
<input id="link_title" size="33" style="height: 22px; width: 268px;" />
<input class="UI_button" onclick="insert_link()" type="button" value="insert link" /><input class="UI_button" onclick="close_link()" type="button" value="close" />
</div>
<div id="imagebox">
<input id="image" size="33" style="height: 22px; width: 268px;" value="Image URL" /><input id="image_alt" size="33" style="height: 22px; width: 268px;" value="Image description" />
<input class="UI_button" id="button1" name="button1" onclick="insert_image()" type="button" value="add image" /><input class="UI_button" onclick="close_image()" type="button" value="close" />
</div>
<div id="iframe_holder">
<iframe frameborder="0" id="iView" style="border: 10px solid; height: 320px; left: 350px; top: 133px; width: 596px;"></iframe>
<div id="tree">
</div>
</div>
No comments:
Post a Comment