Tuesday, December 8, 2009

Rich Text Box

<style>
  .RTBtransparent { display: none; z-index: -10; filter: alpha(opacity=30); width: 0px; position: absolute; height: 0px; background-color: #000000; opacity: 0.3; }
  .RTBbutton { border-right: #f4f4f3 1px solid; border-top: #f4f4f3 1px solid; border-left: #f4f4f3 1px solid; border-bottom: #f4f4f3 1px solid; }
  .RTBbuttonDown { border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid; background-color: #ffffcc; }
  .RTBbuttonOver { border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid; background-color: #ffffcc; }
  .RTBInnerTable { border-right: #c0c0c0 1px solid; border-top: #c0c0c0 1px solid; border-left: #c0c0c0 1px solid; border-bottom: #c0c0c0 1px solid; background-color: #f4f4f3; }
  .RTBDDL { border-right: #000000 1px solid; border-top: #000000 1px solid; font-size: 11px; border-left: #000000 1px solid; border-bottom: #000000 1px solid; font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f3; }
  .RTBframe { border-right: #cccccc 1px solid; border-top: #cccccc 1px solid; margin-top: -1px; display: inline; margin-bottom: -1px; border-left: #cccccc 1px solid; border-bottom: #cccccc 1px solid; }
  .RTB_TD { font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
</style>
<script type="text/javascript" type="text/javascript">
  var isHTMLMode = false; var RTB_Frame = ""; var isIE = true; var isDebug = true;
  document.write("<div id='divTrans' class='RTBtransparent'></div>");
  function GetFrame(childId) {
    RTB_Frame = document.frames[childId.concat('_editor')];
  }
  function HideAllResponsibility(imgID) {
    if (imgID.parentNode.parentNode.nextSibling.style.display == 'none') {
      imgID.parentNode.parentNode.nextSibling.style.display = '';
      imgID.src = 'Images/minus.gif';
    }
    else {
      imgID.parentNode.parentNode.nextSibling.style.display = 'none';
      imgID.src = 'Images/plus.gif';
    }
  }
  function Maximise(MaximisechildId, ImgID) {
    try {
      var divTrans = document.getElementById('divTrans');
      var img1 = document.getElementById(MaximisechildId);
      RTBtbl = img1.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
      RTBtb2 = img1.parentNode.parentNode.parentNode.parentNode.parentNode;
      var x10 = parseInt(img1.style.height.replace('px', ''));
      if (RTBtb2.height < x10) {
        img1.style.height = RTBtb2.height + 'px';
        img1.style.width = RTBtb2.width + 'px';
        RTBtbl.style.position = 'relative';
        RTBtbl.style.top = 0;
        RTBtbl.style.left = 0;
        RTBtbl.style.zIndex = 0;
        divTrans.style.display = 'none';
        divTrans.style.width = 0;
        divTrans.style.height = 0;
        divTrans.style.zIndex = 0;
        ImgID.alt = 'Maximise';
      }
      else {
        var ScrollTop = document.body.scrollTop;
        if (ScrollTop == 0) {
          if (window.pageYOffset)
            ScrollTop = window.pageYOffset;
          else
            ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
        }
        var ScrollLeft = document.body.scrollLeft;
        if (ScrollLeft == 0) {
          if (window.pageXOffset)
            ScrollLeft = window.pageYOffset;
          else
            ScrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
        }

        RTBtbl.style.position = 'absolute';
        RTBtbl.style.top = ScrollTop + 5;
        RTBtbl.style.left = 10;
        img1.style.height = (window.screen.availHeight - 215) + 'px';
        img1.style.width = (window.screen.availWidth - 50) + 'px';
        RTBtbl.style.zIndex = 100;
        divTrans.style.display = '';
        divTrans.style.width = ((window.screen.availWidth + ScrollLeft) - 21) + 'px';
        divTrans.style.height = ((window.screen.availHeight + ScrollTop) + 500) + 'px';
        divTrans.style.zIndex = 90;
        ImgID.alt = 'Minimise';
      }
      var editdoc = img1.contentWindow.document;
      var editorRange = editdoc.body.createTextRange();
      var curRange = editdoc.selection.createRange();

      if (curRange.length == null && !editorRange.inRange(curRange)) {
        editorRange.collapse();
        editorRange.select();
        curRange = editorRange;
      }
    } catch (e) { if (isDebug) { alert(e.description); } }
  }
  function Over_Class(thisID) {
    if (thisID.className == 'RTBbutton') {
      thisID.className = 'RTBbuttonOver';
    }
  }
  function Out_Class(thisID) {
    if (thisID.className == 'RTBbuttonOver') {
      thisID.className = 'RTBbutton';
    }
  }
  function Select_Class(thisID) {
    if (thisID.className == 'RTBbuttonDown') {
      thisID.className = 'RTBbutton';
    } else {
      thisID.className = 'RTBbuttonDown';
    }
  }
  function EditorMode(mode, childId, x) {
    if (document.readyState != 'complete') {
      setTimeout(function() { EditorMode(mode, childId) }, 25);
      return;
    }
    GetFrame(childId);
    showLoading();
    editor_obj = document.all[childId.concat('_editor')];
    var TextEdit = '<textarea ID="' + childId + '_editor" style="width:' + editor_obj.style.width + '; height:' + editor_obj.style.height + '; margin-top: -1px; margin-bottom: -1px;"></textarea>';
    var RichEdit = '<iframe ID="' + childId + '_editor" class="frame" style="width:' + editor_obj.style.width + '; height:' + editor_obj.style.height + ';margin-top: -1px; margin-bottom: -1px;border: 1px solid #CCCCCC;"></iframe>';

    switch (mode) {
      case 'HTML':
        isHTMLMode = true;
        var editdoc = editor_obj.contentWindow.document;
        var contents = editdoc.body.createTextRange().htmlText;
        editor_obj.outerHTML = TextEdit;
        editor_obj = document.all[childId + "_editor"];
        editor_obj.value = contents;
        editor_updateToolbar(childId, "disable");
        editor_focus(editor_obj);
        break;
      default:
        isHTMLMode = false;
        var editdoc = editor_obj.value;
        var html = "";
        html += '<' + 'html><' + 'head></' + 'head><' + 'body contenteditable="true" topmargin=1 leftmargin=1>'
                  + editor_obj.value
                  + '</' + 'body><' + '/html>\n';

        editor_obj.outerHTML = RichEdit;
        editor_obj = document.all[childId + "_editor"];
        var editdoc = document.all[childId.concat('_editor')].contentWindow.document;
        editdoc.open();
        editdoc.write(html);
        editdoc.close();
        editor_updateToolbar(childId, "enable");
        editor_focus(editor_obj);
        break;
    }
    HideLoading();
  }
  function editor_updateToolbar(childId, action) {
    if (isHTMLMode) {
      document.getElementById(childId.concat("_toolbar1")).style.display = 'none';
      document.getElementById(childId.concat("_toolbar2")).style.display = 'none';
    } else {
      document.getElementById(childId.concat("_toolbar1")).style.display = '';
      document.getElementById(childId.concat("_toolbar2")).style.display = '';
    }
  }
  function editor_focus(editor_obj) {
    try {
      if (editor_obj.tagName.toLowerCase() == 'textarea') {
        var myfunc = function() { editor_obj.focus(); };
        setTimeout(myfunc, 100);
      }
      else {
        var editdoc = editor_obj.contentWindow.document;
        var editorRange = editdoc.body.createTextRange();
        var curRange = editdoc.selection.createRange();

        if (curRange.length == null && !editorRange.inRange(curRange)) {
          editorRange.collapse();
          editorRange.select();
          curRange = editorRange;
        }
      }
    } catch (e) { if (isDebug) { alert(e.description); } }
  }
  function setDesignMode(childId) {
    GetFrame(childId)
    try {
      RTB_Frame.document.designMode = 'on';
      editor_obj = document.all[childId.concat('_editor')];
      var HTMLText = childId.concat('_HTMLText');
      var html = "";
      html += '<' + 'html><' + 'head></' + 'head><' + 'body contenteditable="true" topmargin=1 leftmargin=1 style="font-family:Arial; font-size:12px">'
                  + document.getElementById(HTMLText).value
                  + '</' + 'body></' + 'html>\n';
      var editdoc = document.all[childId.concat('_editor')].contentWindow.document;
      editdoc.open();
      editdoc.write(html);
      editdoc.close();
    } catch (e) { if (isDebug) { alert(e.description); } }
  }

  function textCommand(command, childId, opt) {
    if (isHTMLMode) {
      alert("Formatting happens only in Normal mode");
      return;
    }
    GetFrame(childId);
    RTB_Frame.focus();

    try {
      switch (command) {
        case "EditTable":
          EditTable();
          break;
        case "InsertTableWindow":
          InsertTableWindow();
          break;
        case "DeleteTableColumn":
          DeleteTableColumn();
          break;
        case "DeleteTableRow":
          DeleteTableRow();
          break; case "EditTable":
          EditTable();
          break;
        case "InsertTableRowBefore":
          InsertTableRowBefore();
          break;
        case "InsertTableColumnBefore":
          InsertTableColumnBefore();
          break;
        case "InsertImage":
          InsertImage();
          break;
        case "InsertTable":
          InsertTable(3, 3, 100, '%', 'left', 3, 0, 1);
          break;
        case "InserTime":
          var doc = RTB_Frame.document;
          var span = doc.createElement("span");
          span.innerHTML = " ravikuamr ";
          InsertElement(span);
          break;
        case "InserDate":
          var doc = RTB_Frame.document;
          var span = doc.createElement("span");
          span.innerHTML = " ravikuamr ";
          InsertElement(span);
          break;
        case "link":
          RTB_Frame.document.execCommand('createlink', 1);
          // CreateLink();
          break;
        case "formatBlock":
          formatBlock(opt);
          break;
        default:
          RTB_Frame.document.execCommand(command, "", opt);
          RTB_Frame.focus();
          break;
      }
    } catch (e) { if (isDebug) { alert(e.description); } }
  }
  function formatBlock(FBValue) {
    var fb = this.GetNearest(FBValue);
    if (fb) {
    } else {
      var sel = this.GetSelection();
      range = sel.createRange();
    }
    if (fb == null) {
      RTB_Frame.document.execCommand('RemoveFormat');
      var header = RTB_Frame.document.createElement(FBValue);
      header.innerHTML = range.text;
      range.pasteHTML(header.outerHTML);
    }
  }
  function WordCount(childId) {
    /*    var countTextBox = childId + '_lblCharacters';
    GetFrame(childId);
    try {
    var textEntered = RTB_Frame.document.body.innerText;
    document.getElementById(countTextBox).innerText = textEntered.length;
    } catch (e) { }*/
  }

  function fillTxtId(childId) {
    var x = childId.id;
    childID = x.replace('_editor', '');
    WordCount(childID);
    var HTMLText = childID.concat('_HTMLText');
    GetFrame(childID);
    try {
      document.getElementById(HTMLText).value = RTB_Frame.document.body.innerHTML;
    } catch (e) { }
  }
  function InsertTableColumnBefore() {
    this.InsertTableColumn(false);
  }
  function InsertTableColumnAfter() {
    this.InsertTableColumn(true);
  }
  function InsertTableColumn(after) {
    var td = this.GetNearest("td");
    if (!td) {
      return;
    }
    var rows = td.parentNode.parentNode.rows;
    var index = td.cellIndex;
    for (var i = rows.length; --i >= 0; ) {
      var tr = rows[i];
      var otd = RTB_Frame.document.createElement("td");
      otd.innerHTML = (isIE) ? "" : "<br />";

      //if last column and insert column after is select append child
      if (index == tr.cells.length - 1 && after) {
        tr.appendChild(otd);
      } else {
        var ref = tr.cells[index + ((after) ? 1 : 0)]; // 0 
        tr.insertBefore(otd, ref);
      }
    }
  }
  function InsertTableRowBefore() {
    this.InsertTableRow(false);
  }
  function InsertTableRowAfter() {
    this.InsertTableRow(true);
  }
  function InsertTableRow(after) {
    var tr = this.GetNearest("tr");
    if (!tr) return;
    var otr = tr.cloneNode(true);
    if (otr.hasChildNodes()) { for (i = 0; i < otr.childNodes.length; i++) { otr.childNodes[i].innerHTML = ''; } }
    tr.parentNode.insertBefore(otr, ((after) ? tr.nextSibling : tr));
  }
  function DeleteTableColumn() {
    var td = this.GetNearest("td");
    if (!td) {
      return;
    }
    var index = td.cellIndex;
    if (td.parentNode.cells.length == 1) {
      return;
    }
    this.SelectNextNode(td);
    var rows = td.parentNode.parentNode.rows;
    for (var i = rows.length; --i >= 0; ) {
      var tr = rows[i];
      tr.removeChild(tr.cells[index]);
    }
  }
  function DeleteTableRow() {
    var tr = this.GetNearest("tr");
    if (!tr) {
      return;
    }
    var par = tr.parentNode;
    if (par.rows.length == 1) {
      return;
    }
    this.SelectNextNode(tr);
    par.removeChild(tr);
  }
  function InsertElement(el) {
    var sel = this.GetSelection();
    var range = this.CreateRange(sel);

    if (isIE) {
      range.pasteHTML(el.outerHTML);
    } else {
      this.InsertNodeAtSelection(el);
    }
  }
  function GetNearest(tagName) {
    var ancestors = this.GetAllAncestors();
    var ret = null;
    tagName = ("" + tagName).toLowerCase();
    for (var i = 0; i < ancestors.length; i++) {
      var el = ancestors[i];
      if (el) {
        if (el.tagName.toLowerCase() == tagName) {
          ret = el;
          break;
        }
      }
    }
    return ret;
  }
  function GetAllAncestors() {
    var p = this.GetParentElement();
    var a = [];
    while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
      a.push(p);
      p = p.parentNode;
    }
    a.push(RTB_Frame.document.body);
    return a;
  }
  function GetParentElement() {
    var sel = this.GetSelection();
    var range = this.CreateRange(sel);
    if (isIE) {
      switch (sel.type) {
        case "Text":
        case "None":
          return range.parentElement();
        case "Control":
          return range.item(0);
        default:
          return RTB_Frame.document.body;
      }
    } else try {
      var p = range.commonAncestorContainer;
      if (!range.collapsed && range.startContainer == range.endContainer &&
      range.startOffset - range.endOffset <= 1 && range.startContainer.hasChildNodes())
        p = range.startContainer.childNodes[range.startOffset];

      while (p.nodeType == 3) {
        p = p.parentNode;
      }
      return p;
    } catch (e) {
      return null;
    }
  }
  function GetSelection() {
    if (isIE) {
      return RTB_Frame.document.selection;
    } else {
      return RTB_Frame.getSelection();
    }
  }
  function CreateRange(sel) {
    if (isIE) {
      return sel.createRange();
    } else {
      if (typeof sel != "undefined") {
        try {
          return sel.getRangeAt(0);
        } catch (e) {
          return RTB_Frame.document.createRange();
        }
      } else {
        return RTB_Frame.document.createRange();
      }
    }
  }
  function CreateLink() {
    var link = this.GetNearest('a');
    var url = '';
    if (link) {
      var url = link.getAttribute('temp_href');
      if (!url) url = link.getAttribute('href');
    } else {
      var sel = this.GetSelection();
      var text = '';
      if (isIE) {
        text = sel.createRange().text;
      } else {
        text = new String(sel);
      }

      if (text == '') {
        alert('Please select some text');
        return;
      }
    }
    url = prompt('Enter a URL:', (url != '') ? url : 'http://');

    if (url != null) {
      if (!link) {
        var tempUrl = 'http://tempuri.org/tempuri.html';
        RTB_Frame.document.execCommand('createlink', null, tempUrl);
        var links = RTB_Frame.document.getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
          if (links[i].href == tempUrl) {
            link = links[i];
            break;
          }
        }
      }
      link.href = url;
      link.setAttribute('temp_href', url);
    }
  }
  function GetSelection() {
    return RTB_Frame.document.selection;
  }
  function InsertTable(cols, rows, width, widthUnit, align, cellpadding, cellspacing, border) {
    RTB_Frame.focus();
    var sel = this.GetSelection();
    var range = this.CreateRange(sel);

    var doc = RTB_Frame.document;
    var table = doc.createElement("table");
    table.style.width = width + widthUnit;
    //table.align = align;
    table.border = border;
    table.cellSpacing = cellspacing;
    table.cellPadding = cellpadding;
    table.setAttribute('bordercolorlight', '#000000');
    table.setAttribute('bordercolordark', '#FFFFFF');

    var tbody = doc.createElement("tbody");
    table.appendChild(tbody);

    for (var i = 0; i < rows; ++i) {
      var tr = doc.createElement("tr");
      tbody.appendChild(tr);
      for (var j = 0; j < cols; ++j) {
        var td = doc.createElement("td");
        tr.appendChild(td);
        if (!isIE) td.appendChild(doc.createElement("br"));
      }
    }

    if (isIE) {
      range.pasteHTML(doc.createElement("br").outerHTML);
      range.pasteHTML(table.outerHTML);
      range.pasteHTML(doc.createElement("br").outerHTML);

    } else {
      this.InsertNodeAtSelection(table);
    }
    return true;
  }

  function SelectNextNode(el) {
    var node = el.nextSibling;
    while (node && node.nodeType != 1) {
      node = node.nextSibling;
    }
    if (!node) {
      node = el.previousSibling;
      while (node && node.nodeType != 1) {
        node = node.previousSibling;
      }
    }
    if (!node) {
      node = el.parentNode;
    }
    this.SelectNodeContents(node);
  }
  function SelectNodeContents(node, pos) {
    var range;
    var collapsed = (typeof pos != "undefined");
    if (isIE) {
      range = RTB_Frame.document.body.createTextRange();
      range.moveToElementText(node);
      (collapsed) && range.collapse(pos);
      range.select();
    } else {
      var sel = this.GetSelection();
      range = RTB_Frame.document.createRange();
      range.selectNodeContents(node);
      (collapsed) && range.collapse(pos);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
  function InsertTableWindow() {
    this.LaunchTableWindow(false);
  }
  function EditTable() {
    this.LaunchTableWindow(true);
  }
  function LaunchTableWindow(editing) {

    var tableWin = window.open("", "tableWin", "width=400,height=200");
    if (tableWin) {
      tableWin.focus();
    } else {
      alert("Please turn off your PopUp blocking software");
      return;
    }

    tableWin.document.body.innerHTML = '';
    tableWin.document.open();
    tableWin.document.write(FTB_TablePopUpHtml);
    tableWin.document.close();

    launchParameters = new Object();
    launchParameters['ftb'] = this;
    launchParameters['table'] = (editing) ? this.GetNearest("table") : null;
    tableWin.launchParameters = launchParameters;
    tableWin.load();
  }

  var FTB_TablePopUpHtml = new String("ravi");
</script>
Bold Italic Underline Left Align Center Align Right Align Justify Ordered List Unordered List SubScript SuperScript De-Indent In-Indent Insert Line Clear Format
Link InsertTable InsertTableColumnBefore InsertTableRowBefore DeleteTableColumn DeleteTableRow  
Maximise