davglass/yui_editor_test.html

## yui_editor_test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
    <style>
      textarea {
        border: 0;
        margin: 0;
        padding: 0;
      }
      .yui-editor-container {
        /* Removed this rule..
            position: absolute;
        */
        top: -9999px;
        left: -9999px;
        z-index: 999; /* So Safari behaves */
      }
      .editable {
        border: 1px solid black;
        width: 600px;
	    height: 150px;
	    text-align: left;
      }

      #editor-toolbar {
	    height: 80px;
	    width: 1100px;
      }

      #editable_cont {
        height: 580px;
        padding-top: 30px;
        overflow: auto;
	    z-index: -1;
	    border: 4px solid blue;
      }

      #editor-container {
	    z-index: 1;
        height: 830px;
      }

      .yui-skin-sam .yui-toolbar-container .yui-toolbar-subcont {
	    border-bottom: none;
      }
    </style>
  </head>

  <body>
    <div id="editor-container" class="yui-skin-sam">
      <div id="editor-toolbar"></div>
      <div id="editable_cont">
        <div id='T1D'  class="editable"></div>
        <br/>
        <div id='T2D'  class="editable"></div>
        <br/>
        <div id='T3D'  class="editable"></div>
        <br/>
        <div id='T4D'  class="editable"></div>
        <br/>
        <div id='T5D'  class="editable"></div>
        <textarea id="editor"></textarea>
      </div>
    </div>

    <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/container/container_core-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/editor/editor-min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript">

      (function() {
        var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        editing = null;

        var myConfig = {
          height: '150px',
          width: '600px',
          animate: true,
          filterWord: true,
          focusAtStart: true,
          autoHeight: true
        };

        var myEditor = new YAHOO.widget.Editor('editor', myConfig);
        myEditor._defaultToolbar.buttonType = 'basic';

        myEditor.on('afterRender', function(){
          Dom.get('editor-toolbar').appendChild(this.get('toolbar_cont'));
	}, myEditor, true);

 	myEditor.on('heightChange', function(event){
          var newHeight = event.newValue;
          Dom.setStyle(editing, "height", newHeight);
    	});


        myEditor.render();

        Event.on('editable_cont', 'dblclick', function(ev) {
          var tar = Event.getTarget(ev);
          while(tar.id != 'editable_cont') {
            if (Dom.hasClass(tar, 'editable')) {
              if (editing !== null) {
                    myEditor.saveHTML();
		            editing.innerHTML = myEditor.get('element').value;
              }

              var xy = Dom.getXY(tar);

              myEditor.setEditorHTML(tar.innerHTML);

              Dom.setXY(myEditor.get('element_cont').get('element'), xy);
              editing = tar;
              myEditor.focus();
            }
            tar = tar.parentNode;
          }
	});

	$("#editable_cont").scroll(function() {
          var editingXY = Dom.getXY(editing);
          Dom.setXY(myEditor.get('element_cont').get('element'), editingXY);
	});

      })();

    </script>

  </body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>Example</title>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
	<style>
	textarea {
	border: 0;
	margin: 0;
	padding: 0;
	}
	.yui-editor-container {
	/* Removed this rule..
	position: absolute;
	*/
	top: -9999px;
	left: -9999px;
	z-index: 999; /* So Safari behaves */
	}
	.editable {
	border: 1px solid black;
	width: 600px;
	height: 150px;
	text-align: left;
	}

	#editor-toolbar {
	height: 80px;
	width: 1100px;
	}

	#editable_cont {
	height: 580px;
	padding-top: 30px;
	overflow: auto;
	z-index: -1;
	border: 4px solid blue;
	}

	#editor-container {
	z-index: 1;
	height: 830px;
	}

	.yui-skin-sam .yui-toolbar-container .yui-toolbar-subcont {
	border-bottom: none;
	}
	</style>
	</head>

	<body>
	<div id="editor-container" class="yui-skin-sam">
	<div id="editor-toolbar"></div>
	<div id="editable_cont">
	<div id='T1D' class="editable"></div>
	<br/>
	<div id='T2D' class="editable"></div>
	<br/>
	<div id='T3D' class="editable"></div>
	<br/>
	<div id='T4D' class="editable"></div>
	<br/>
	<div id='T5D' class="editable"></div>
	<textarea id="editor"></textarea>
	</div>
	</div>

	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/container/container_core-min.js&2.7.0/build/menu/menu-min.js&2.7.0/build/element/element-min.js&2.7.0/build/button/button-min.js&2.7.0/build/editor/editor-min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<script type="text/javascript">

	(function() {
	var Dom = YAHOO.util.Dom,
	Event = YAHOO.util.Event,
	editing = null;

	var myConfig = {
	height: '150px',
	width: '600px',
	animate: true,
	filterWord: true,
	focusAtStart: true,
	autoHeight: true
	};

	var myEditor = new YAHOO.widget.Editor('editor', myConfig);
	myEditor._defaultToolbar.buttonType = 'basic';

	myEditor.on('afterRender', function(){
	Dom.get('editor-toolbar').appendChild(this.get('toolbar_cont'));
	}, myEditor, true);

	myEditor.on('heightChange', function(event){
	var newHeight = event.newValue;
	Dom.setStyle(editing, "height", newHeight);
	});


	myEditor.render();

	Event.on('editable_cont', 'dblclick', function(ev) {
	var tar = Event.getTarget(ev);
	while(tar.id != 'editable_cont') {
	if (Dom.hasClass(tar, 'editable')) {
	if (editing !== null) {
	myEditor.saveHTML();
	editing.innerHTML = myEditor.get('element').value;
	}

	var xy = Dom.getXY(tar);

	myEditor.setEditorHTML(tar.innerHTML);

	Dom.setXY(myEditor.get('element_cont').get('element'), xy);
	editing = tar;
	myEditor.focus();
	}
	tar = tar.parentNode;
	}
	});

	$("#editable_cont").scroll(function() {
	var editingXY = Dom.getXY(editing);
	Dom.setXY(myEditor.get('element_cont').get('element'), editingXY);
	});

	})();

	</script>

	</body>
	</html>