<!DOCTYPE html>
<html>
<head>
<title>Wysiwyg - FF/IE build-in editor</title>
<style type="text/css">
.edit	{height:100%; width:100%}
.edit2	{min-height:7em; height:auto;}
</style>

<script type="text/javascript">
function objGet(x,doc)	{var d=(doc)?doc:document; return (d.getElementById?d.getElementById(x):d.all?d.all[x]:d.layers?d.layers[x]:null);}

function repl(str)	{return str.replace(/\n(\<\w)|(\<\w)/gi,"\n$1$2");}

function editXdocFF()	{return objGet('wwwFF').contentWindow.document;}
function editXobjFF()	{return objGet('wwwFF').contentWindow;}
function editXFF(prikaz){editXobj().focus(); var x = (prikaz=="CreateLink") ? prompt("Enter a URL:", "http://") : null; editXdoc().execCommand(prikaz,false,x); editXobj().focus();}
function text2htmlFF()	{editXdoc().open(); editXdoc().write(objGet('htmltext').value); editXdoc().close();}
function html2textFF()	{objGet('htmltext').value = repl(editXdoc().getElementsByTagName("BODY")[0].innerHTML);}

function editXdocIE()	{return document;}
function editXobjIE()	{return objGet('wwwIE');}
function editXIE(prikaz){editXobj().focus(); editXdoc().execCommand(prikaz);}
function text2htmlIE()	{editXobj().innerHTML = objGet('htmltext').value;}
function html2textIE()	{objGet('htmltext').value = repl(editXobj().innerHTML);}

function fullscreen()
{
var oo, nn;
oo = objGet('xx');
nn = (navigator.appName=="Netscape");
if (myScreen[0]===0)
	{
	myScreen[0] = 1;
	myScreen[1] = parseInt(oo.offsetWidth);
	myScreen[2] = parseInt(oo.offsetHeight);
	myScreen[3] = parseInt(nn ? window.innerWidth  : document.body.offsetWidth);
	myScreen[4] = parseInt(nn ? window.innerHeight : document.body.offsetHeight);
	oo.style.position  = 'absolute';
	oo.style.zIndex  = 10;
	oo.style.top  = '0';
	oo.style.backgroundColor = '#ffffff';
	oo.style.width  = myScreen[3] + 'px';
	oo.style.height = myScreen[4] + 'px';
	}
else	{
	myScreen[0] = 0;
	oo.style.position  = 'static';
	oo.style.zIndex  = 0;
	oo.style.top  = '';
	oo.style.width  = myScreen[1] + 'px';
	oo.style.height = myScreen[2] + 'px';
	}
}

function getPattern(name,type)
{
var reg, patterns;
patterns = [
  '<(%name%)[\\w\\W]*?>([\\w\\W]*?)<\/(%name%)>',
  '<(%name%)[\\w\\W]*?>',
  '\\s(%name%)[\\s]*\\=[\\s]*(?:(?:["\']([\\w\\W]*?)["\'])|(?:([^"\'][\\w\\W]*?)(?=[\\s>])))'
];
type = patterns[type] ? type : 0;
reg  = new RegExp(patterns[type].replace(new RegExp('%name%','g'),name),'gim');
//alert(reg.source)
return reg;
}

function cleanWord()
{
//reg = /(<(?!table|tr|td).*?>)/g; smaz vse mimo tagy table|tr|td
var str,f,ch,i,j,check, remove, paramscheck;
  f   = document.form;
  str = f.htmltext.value;
  check = {
    'clbold'     : ['b','strong'],
    'clcursive'  : ['i','em'],
    'clunderline': ['u'],
    'clborder'   : ['border'],
    'clsize'     : ['width','height'],
    'clpad'      : ['cellspacing','cellpadding'],
    'clalign'    : ['align','valign']
    };
  remove = {
    'p'     :[true,"$2",0,1],
    'span'  :[true,"$2",0,1],
    'font'  :[true,"$2",0,1],
    'b'     :[true,"$2",0,1],
    'strong':[true,"$2",0,1],
    'i'     :[true,"$2",0,1],
    'em'    :[true,"$2",0,1],
    'u'     :[true,"$2",0,1],
    'style' :[true,"",2,2],
    'class' :[true,"",2,2],
    'face'  :[true,"",2,2],
    'size'  :[true,"",2,2],
    'border':[true,"",2,2],
    'width' :[true,"",2,2],
    'height':[true,"",2,2],
    'cellspacing':[true,"",2,2],
    'cellpadding':[true,"",2,2],
    'align' :[true,"",2,2],
    'valign':[true,"",2,2]
    }
  //paramscheck = false;
  for (i in check)
    {
    if (f[i] && f[i].checked)
      {
      for (j in check[i])
        {
        remove[check[i][j]][0] = false;
        //if (remove[check[i][j]][1]==2) {paramscheck = true;}
        }
      }
    }
  //if (!paramscheck)
  //  {
  //  str = str.replace(getPattern('[a-z]',1),'');
  //  }
  for (i in remove)
    {
    if (remove[i][0]==true)
      {
      str = str.replace(getPattern(i,remove[i][2]),remove[i][1]);
      str = str.replace(getPattern(i,remove[i][3]),remove[i][1]);
      }
    }
  str = str.replace(/<!--[\n\w\W]*?-->/gi,"");	//comment
  str = str.replace(/<[\/?]?xml[\w\W]*?>/gim,"");	//<?xml> IE
  str = str.replace(/<\/?[a-z]\:[\w\W]*?>/gim,"");	//<o:> IE
  str = str.replace(/(&nbsp;)+/gm," ");		//non-break space
  str = str.replace(/[\n\r][\n\r\s]+/gm,"\n");	//new line + (new line|space)
  f.htmltext.value = str;
  //text2html();
}

function myinit()
{
var obj;
if (moz)
  {
  editX     = editXFF;
  editXdoc  = editXdocFF;
  editXobj  = editXobjFF;
  html2text = html2textFF;
  text2html = text2htmlFF;
  editXdoc().designMode = "on";		//iframe.document
  obj = objGet("wwwIE");
  }
else
  {
  editX     = editXIE;
  editXdoc  = editXdocIE;
  editXobj  = editXobjIE;
  html2text = html2textIE;
  text2html = text2htmlIE;
  editXobj().contentEditable = "true";	//div
  obj = objGet("wwwFF");
  }
obj.style.display = "none";
editXdoc().open();
editXdoc().write("");
editXdoc().close();
text2html();
editXobj().focus();
}

var moz  = (navigator.appName=="Netscape");
var ie   = (document.all);
//var ns   = (d.layers);
//var op   = (window.opera);
var editX,editXdoc,editXobj,html2text,text2html;
var myScreen = [0,0,0,0,0];
</script>
</head>

<body onload="">

<form action="#" name="form">
  <fieldset><legend>Html</legend>
  <table><tr><td>
    <textarea rows="10" cols="60" name="htmltext" id="htmltext"></textarea></fieldset>
    <!-- onfocus="html2text()" onblur="text2html()" -->
  </td><td>
    <table><tr><td>

      <input type="button" value=" Word clean " onclick="cleanWord()"  title="Vycistit word smeti"/><br>
    </td><td>
      Zachovat:<br/>
      <label><input type="checkbox" name="clborder"   checked="checked"> border</label><br>
      <label><input type="checkbox" name="clpad"      > spacing, padding</label><br>
      <label><input type="checkbox" name="clsize"     > width, height</label><br>
      <label><input type="checkbox" name="clalign"    > align, valign</label><br>
      <label><input type="checkbox" name="clbold"     checked="checked"> <b>bold</b></label><br>
      <label><input type="checkbox" name="clcursive"  > <i>italic</i></label><br>
      <label><input type="checkbox" name="clunderline"> <u>underline</u></label><br>
    </td></tr></table>
  </td></tr></table>
</fieldset>

<p>
      <label>html <input type="button" value=" <- " onclick="html2text()"/></label>
      <label><input type="button" value=" -> " onclick="text2html()"/> page</label>
      &nbsp;  &nbsp; &nbsp;
      <label>Pismena</label> <input type="text" name="pismena"/>
      <input type="button" value=" Mala "  onclick="var o=this.form.pismena; o.value = o.value.toLowerCase();"/>
      <input type="button" value=" Velka " onclick="var o=this.form.pismena; o.value = o.value.toUpperCase();"/>

</p>

<fieldset id=xx>
<legend>Page</legend>
<div>
	<input type="button" value=" B "	onclick="editX('Bold')"		title="Tucne     ctrl+b alt+b" accesskey="B"/> 
	<input type="button" value=" I "	onclick="editX('Italic')"	title="Sikmo     ctrl+i alt+i" accesskey="I"/> 
	<input type="button" value=" U "	onclick="editX('Underline')"	title="Podtrzene ctrl+u alt+u" accesskey="U"/>
	<input type="button" value=" Link "	onclick="editX('CreateLink')"	title="Novy odkaz"/>
	<input type="button" value=" unLink "	onclick="editX('Unlink')"	title="Zrus odkaz"/>
	<input type="button" value=" screen "	onclick="fullscreen()"	title="Zrus odkaz"/>
<hr>
</div>
<div class="edit2">
  <iframe id="wwwFF" class="edit" frameborder="0"></iframe>
  <div    id="wwwIE" class="edit"></div>
</div>
</fieldset>

</form>


<script type="text/javascript">myinit()</script>
<!--script type="text/javascript" src="view-source.js"></script-->
</body>
</html>