<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">

function mouseEventHandler(mEvent)
{
//    var node = mEvent.srcElement;
}

function setReadOnly(readOnly)
{
   var node = document.getElementById("editableArea");
   if (readOnly)
      node.setAttribute("contenteditable", "false");
   else
      node.setAttribute("contenteditable", "true");
}

function getCurrentStyle(node, prop)
{
   return document.defaultView.getComputedStyle(node, null).getPropertyValue(prop);
}

function getUserSelection()
{
   var userSelection;
   if (window.getSelection)
   {
      userSelection = window.getSelection();
   }
   else
   {
      return null;
   }

   return userSelection;
}

function getAlignment()
{
   var node = getUserSelection().anchorNode.parentNode;
   return getCurrentStyle(node, "text-align");
}

function getFontFamily()
{
   var node = getUserSelection().anchorNode.parentNode;
   return getCurrentStyle(node, "font-family");
}

function getFontSize()
{
   var node = getUserSelection().anchorNode.parentNode;
   return getCurrentStyle(node, "font-size");
}

function getForegroundColor()
{
   var node = getUserSelection().anchorNode.parentNode;
   return getCurrentStyle(node, "color");
}

function getBackgroundColor()
{
   var node = getUserSelection().anchorNode.parentNode;
   return getCurrentStyle(node, "background-color");
}

function getTextDirection()
{
   var node = getUserSelection().anchorNode.parentNode;
   return getCurrentStyle(node, "direction");
}

function replaceHtml(htmlString)
{
   var node = document.getElementById("editableArea");
   node.innerHTML = htmlString;
//    adjustImagesPath();
}

function getHtml()
{
   var node = document.getElementById("editableArea");
   return node.innerHTML;
}

function replaceImageSrc(src, dest)
{
    var html = getHtml();
    var res = html.replace(src, dest);
    replaceHtml(res);
}

function insertLink(href, target, title)
{
    if (window.getSelection)
    {
        var userSelection = window.getSelection();
        var lnk = document.createElement("a");
        lnk.href = href;
        lnk.target = target;
        lnk.title = title;
        var range = userSelection.getRangeAt(0);
        range.surroundContents(lnk);
    } else
        alert("Select something");
}
</script>

</head>

<body id="editableArea" contenteditable="true" onMouseDown="javaScript:mouseEventHandler(event);"></body>
</html>
