Location: PHPKode > projects > Content*Builder > contentbuilder/plugins/article2/editor_v2/toolbars/Doc/tutorial.htm
<!-- Copyright 1999 Microsoft Corporation. All rights reserved. -->
<!-- Author: Steve Isaac, Microsoft Corporation -->
<head>
<link REL="stylesheet" TYPE="text/css" HREF="../toolbars.css">
<script ID="clientEventHandlersJS" LANGUAGE="javascript">
<!--

// Text range used by the content menus.
var contentMenuTextRange;

// Search the document in the iframe for the specified string and 
// select it if found.
function SearchDoc(searchString) {
  var tr, selrange;

  // Set up text ranges on the selection and the entire document
  selrange = tbContentElement.document.selection.createRange();
  tr = tbContentElement.document.body.createTextRange();
  
  // If the selection contains the text we are search for, we want to start the 
  // search after the selection. Otherwise just search the whole document.
  if (searchString.toLowerCase() == selrange.text.toLowerCase()) {
	  
	// Set the beginning of the document text range to the end of the selection 
	tr.setEndPoint("StartToEnd", selrange);
	
	// If we find the text, we are done. If not, we need to do the search from the
	// beginning of the document. We will either find a different instance of the
	// text, or end up re-selecting the prior selection.
    if (tr.findText(searchString)) {
      tr.select();
      tr.scrollIntoView();
    } else {
      tr = tbContentElement.document.body.createTextRange();
	  tr.findText(searchString);
      tr.select();
      tr.scrollIntoView();
    }
  } else {
 	// Search the entire document. If we don't find the text, put up an alert.
    if (tr.findText(searchString)) {
      tr.select();
      tr.scrollIntoView();
    } else {
      alert(searchString + " not found.");
    }
  }
}

// Search keypress handler. Do a search when the user hits Enter.
function SEARCH_VALUE_onkeypress() {
  
  // Check for the Enter key being pressed and search.
  if (event.keyCode == 13) {
    SearchDoc(SEARCH_VALUE.value);  
  }	
}


// window.onload handler. Build up the content menu (can't do this until the doc
// in the frame has loaded).
function window_onload() {
  var dummy, i, j, doc, uniqueId = 0, currentH1Element, currentH1Menu = null;
    
  contentMenuTextRange = tbContentElement.document.body.createTextRange();
  tbContentElement.document.onmouseup = "alert('Hello')";
  
  // First, get rid of the dummy menu entry. This was put in to allocate one level
  // of submenu. 
  dummy = document.body.all["DummyContentsSubmenu"];
  dummy.outerHTML = "";
  
  // Create a pointer to the Contents menu
  contentsMenu = document.body.all["TutorialContentsMenu"];
  
  // Walk through the document in our IFrame.
  doc = tbContentElement.document.body.all;
  for (i = 0; i < doc.length; i++) {
  
    // Have we found an <H1>? Create a menu item if so.
    if (doc[i].tagName == "H1") {
	  contentMenuTextRange.moveToElementText(doc[i]);
	  contentsMenu.insertAdjacentHTML("BeforeEnd", '<div class="tbMenuItem" id="ContentMenu' + uniqueId + '" BOOKMARK="' + contentMenuTextRange.getBookmark() + '" onclick="ContentExecute();">' + doc[i].innerText + '</div>');        
	  currentH1Menu = document.body.all["ContentMenu" + uniqueId];
	  currentH1Element = doc[i];
	  uniqueId++;
    }
    
    // Have we found an <H2>? Turn the current H1 menu item into a submenu if it isn't
    // already and add an H2 submenu item. Use the text of the header as the menu id. 
    if (doc[i].tagName == "H2") {
      if (currentH1Menu == null) {
        alert("Content Menu: <H2> encountered before first <H1>");
        return;
      }

      if (currentH1Menu.className == "tbMenuItem") {
        // Turn H1 menu into submenu
        currentH1Menu.className = "tbSubmenu";
        currentH1Menu.onclick = "";
        // Add an entry in the submenu for the H1. Prepend the id with '_', since the submenu already
        // has this id.
	      contentMenuTextRange.moveToElementText(currentH1Element);
        currentH1Menu.insertAdjacentHTML("BeforeEnd", '<div class="tbMenuItem" id="ContentMenu' + uniqueId++ + '" BOOKMARK="' + contentMenuTextRange.getBookmark() + '" onclick="ContentExecute();"> <b>' + currentH1Element.innerText + '</b> </div>');
        currentH1Menu.ID = "Content" + currentH1Menu.ID;
      }
	    contentMenuTextRange.moveToElementText(doc[i]);
      currentH1Menu.insertAdjacentHTML("BeforeEnd", '<div class="tbMenuItem" id="ContentMenu' + uniqueId++ + '" BOOKMARK="' + contentMenuTextRange.getBookmark() + '" onclick="ContentExecute();">' + doc[i].innerText + '</div>');      
    }
  }
  
  // Rebuild the contents menu.
  TBRebuildMenu(contentsMenu, true);	 
}


// Handler for content menus onclick event. Jump to the header and select it.
function ContentExecute() {
  contentMenuTextRange.moveToBookmark(tbEventSrcElement.BOOKMARK);
  contentMenuTextRange.moveToElementText(contentMenuTextRange.parentElement());
  contentMenuTextRange.select();
  contentMenuTextRange.scrollIntoView();
}

function Format_onclick() {
  var selrange;
  
  selrange = tbContentElement.document.selection.createRange();
  selrange.execCommand(tbEventSrcElement.id);
}

//-->
</script>
</head>
<body LANGUAGE="javascript" onload="return window_onload()">

<!-- Toolbar definitions -->
<div class="tbToolbar" ID="TopToolbar">
  <div class="tbGeneral" ID="SEARCH_LABEL" TITLE="Enter search string, hit RETURN" style="top:6; width:40; FONT-FAMILY: ms sans serif; FONT-SIZE: 10px;">
    Search:
  </div>
  <input type="text" class="tbGeneral" ID="SEARCH_VALUE" TITLE="Enter search string, hit RETURN" style="width:200" LANGUAGE="javascript" onkeypress="return SEARCH_VALUE_onkeypress()">
  <div class="tbMenu" ID="TutorialContentsMenu">
    Contents
    <div class="tbSubmenu" ID="DummyContentsSubmenu">
    </div>
  </div>
 
  <div class="tbSeparator"></div>

  <div class="tbButton" ID="Bold" TITLE="Bold" LANGUAGE="javascript" onclick="return Format_onclick()">
    <img class="tbIcon" src="../../images/bold.gif" WIDTH="23" HEIGHT="22">
  </div>
  <div class="tbButton" ID="Italic" TITLE="Italic" LANGUAGE="javascript" onclick="return Format_onclick()">
    <img class="tbIcon" src="../../images/italic.gif" WIDTH="23" HEIGHT="22">
  </div>
  <div class="tbButton" ID="Underline" TITLE="Underline" LANGUAGE="javascript" onclick="return Format_onclick()">
    <img class="tbIcon" src="../../images/under.gif" WIDTH="23" HEIGHT="22">
  </div>

  <div class="tbSeparator"></div>

  <div class="tbButton" ID="Outdent" TITLE="Decrease Indent" LANGUAGE="javascript" onclick="return Format_onclick()">
    <img class="tbIcon" src="../../images/deindent.gif" WIDTH="23" HEIGHT="22">
  </div>
  <div class="tbButton" ID="Indent" TITLE="Increase Indent" LANGUAGE="javascript" onclick="return Format_onclick()">
    <img class="tbIcon" src="../../images/inindent.gif" WIDTH="23" HEIGHT="22">
  </div>

  <div class="tbSeparator"></div>

  <div class="tbMenu" ID="FunMenu">
    <font color="red">Fun </font><font color="blue">Stuff</font>
    <div class="tbMenuItem" ID="AnyHTML" onclick="alert('Any HTML can go...');"> 
      <font color="DeepPink" style="FONT-SIZE: 18px"><i>Any HTML can go in a menu</i> </font> 
    </div>
    <div class="tbMenuItem" ID="NewsForToday" onclick="alert('News For Today...');">
      <img align="middle" src="../../images/reddot.gif" WIDTH="328" HEIGHT="21">
    </div>
    <div class="tbSubmenu" ID="CheckItOut">
      <font color="blue" style="FONT-SIZE: 24px"><b>Check</b> this out: IFRAMES!</font> 
        <div class="tbMenuItem" ID="Frame1" onclick="alert('Yahoo!');">
		    <iframe src="http://www.yahoo.com"></iframe>
		</div>
        <div class="tbMenuItem" ID="Frame2" onclick="alert('Microsoft');">
		    <iframe src="http://www.microsoft.com"></iframe>
		</div>
    </div>
  </div>
</div>

<!-- Content element -->
<iframe ID="tbContentElement" class="tbContentElement" src="innertut.htm"></iframe>

<!-- Toolbar package -->
<script LANGUAGE="Javascript" SRC="../toolbars.js">
</script>
<script LANGUAGE="Javascript">
  tbScriptletDefinitionFile = "../menubody.htm";
</script>
<script LANGUAGE="Javascript" SRC="../tbmenus.js">
</script>
</body>

Return current item: Content*Builder