[Phpslash-commit] CVS: phpslash-dev/public_html/scripts/tinymce/examples dump.php,NONE,1.1 example_a

SourceForge Headquarters 1320 Columbia Street Suite 310 San Diego, CA 92101 +1 (858) 422-6466

Update of /cvsroot/phpslash/phpslash-dev/public_html/scripts/tinymce/examples
In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv17564/phpslash-dev/public_html/scripts/tinymce/examples

Added Files:
	dump.php example_advanced.css example_advanced.htm 
	example_full.htm example_mail.htm example_simple.htm logo.jpg 
	logo_over.jpg 
Log Message:
complete tinyMCE addition

--- NEW FILE: dump.php ---
<html>

<head>

<title>Displays the output of a TinyMCE</title>

</head>

<body>

<h2>HTML output from post</h2>

<table border="1" width="100%">

	<tr bgcolor="#CCCCCC"><td width="1%" nowrap="nowrap"><strong>Form element</strong></td><td><strong>HTML output</strong></td></tr>

	<? foreach ($_REQUEST as $name => $value) { ?>

		<tr><td width="1%" nowrap="nowrap"><?=$name?></td><td><?=stripslashes($value)?></td></tr>

	<? } ?>

</table>

<h2>Source output from post</h2>

<table border="1" width="100%">

	<tr bgcolor="#CCCCCC"><td width="1%" nowrap="nowrap"><strong>Form element</td><td><strong>Source output</strong></td></tr>

	<? foreach ($_REQUEST as $name => $value) { ?>

		<tr><td width="1%" nowrap="nowrap"><?=$name?></td><td><?=htmlentities(stripslashes($value))?></td></tr>

	<? } ?>

</table>

</body>

</html>

--- NEW FILE: example_advanced.css ---
body {

	background-color: #FFFFFF;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	color: #880000;

	scrollbar-3dlight-color: #F0F0EE;

	scrollbar-arrow-color: #676662;

	scrollbar-base-color: #F0F0EE;

	scrollbar-darkshadow-color: #DDDDDD;

	scrollbar-face-color: #E0E0DD;

	scrollbar-highlight-color: #F0F0EE;

	scrollbar-shadow-color: #F0F0EE;

	scrollbar-track-color: #F5F5F5;

}

.header1 {

	font-weight: bold;

	font-size: 14px

}

.header2 {

	font-weight: bold;

	font-size: 12px;

	color: #FF0000

}

.header3 {

	font-weight: normal;

	font-size: 12px;

	color: #0000FF

}

td {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

}

--- NEW FILE: example_advanced.htm ---
<html>

<head>

<link href="../docs/style.css" rel="stylesheet" type="text/css">

<!-- tinyMCE -->

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

	tinyMCE.init({

		theme : "advanced",

		//language : "se",

		mode : "exact",

		elements : "elm1,elm2",

		//insertlink_callback : "customInsertLink",

		//insertimage_callback : "customInsertImage",

		save_callback : "customSave",

		content_css : "example_advanced.css",

		extended_valid_elements : "a[href|target|name]",

		//invalid_elements : "a",

		theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3", // Theme specific setting CSS classes

		debug : false

	});

	// Custom insert link callback, extends the link function

	function customInsertLink(href, target) {

		var result = new Array();

		alert("customInsertLink called href: " + href + " target: " + target);

		result['href'] = "http://www.sourceforge.net";

		result['target'] = '_blank';

		return result;

	}

	// Custom insert image callback, extends the image function

	function customInsertImage(src, alt, border, hspace, vspace, width, height, align) {

		var result = new Array();

		var debug = "CustomInsertImage called:\n"

		debug += "src: " + src + "\n";

		debug += "alt: " + alt + "\n";

		debug += "border: " + border + "\n";

		debug += "hspace: " + hspace + "\n";

		debug += "vspace: " + vspace + "\n";

		debug += "width: " + width + "\n";

		debug += "height: " + height + "\n";

		debug += "align: " + align + "\n";

		alert(debug);

		result['src'] = "logo.jpg";

		result['alt'] = "test description";

		result['border'] = "2";

		result['hspace'] = "5";

		result['vspace'] = "5";

		result['width'] = width;

		result['height'] = height;

		result['align'] = "right";

		return result;

	}

	// Custom save callback, gets called when the contents is to be submitted

	function customSave(id, content) {

		alert(id + "=" + content);

	}

</script>

<!-- /tinyMCE -->

</head>

<body>

<a href="example_simple.htm">[Simple example]</a> [Advanced example] <a href="example_mail.htm">[Mail example]</a> <a href="example_full.htm">[Full featured example]</a>

<h3>Advanced example</h3>

This page shows a more complex usage of TinyMCE. On this page the mode is set to convert specific elements in this case a DIV element and a TEXTAREA into editor instances. The example below uses a custom CSS, thats why the text is red and it allso uses the &quot;advanced&quot; theme that includes more options than the default one. The code allso includes examples of custom call back functions and much more. Notice the submit button at the end of the page, this button triggers a save action. Read more about the features and possible settings of TinyMCE in the <a href="../docs/index.htm">manual</a>.

<br>

<!-- Form with textare element with width: 100% -->

<form method="post" action="post.php">

<textarea id="elm1" name="elm2" style="width:100%" rows="15">

	<span class="header1">Test header 1</span><br />

	<span class="header2">Test header 2</span><br />

	<span class="header3">Test header 3</span><br />

	Some <b>element</b>, this is to be editor 1. <br /> This editor instance has a 100% width to it.

	<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>

	<img src="logo.jpg">

</textarea>

<br>

<input type="button" name="save" value="save" onclick="tinyMCE.triggerSave();">

</form>

<!-- Div elements that gets to be a editor instance aswell -->

<div id="elm2" style="width:400px; height:250px">

	Some <b>element</b>, this is to be editor 2. <br /> This editor instance is a DIV element instead of a textarea.

	<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>

	<img src="logo.jpg">

</div>

<br>

Some custom actions:

<a href="javascript:tinyMCE.execCommand('Bold');">[Bold]</a> | 

<a href="javascript:tinyMCE.execCommand('Italic');">[Italic]</a>

<a href="javascript:tinyMCE.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert some HTML]</a>

<a href="javascript:tinyMCE.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>

<br>

</body>

</html>
--- NEW FILE: example_full.htm ---
<html>

<head>

<link href="../docs/style.css" rel="stylesheet" type="text/css">

<!-- tinyMCE -->

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce_src.js"></script>

<script language="javascript" type="text/javascript">

	tinyMCE.init({

		mode : "textareas",

		theme : "advanced",

		plugins : "advimage,advlink,emotions,iespell,insertdatetime,preview,zoom",

		theme_advanced_buttons1_add : "fontselect,fontsizeselect,forecolor",

		theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom",

		theme_advanced_buttons3_add : "emotions,iespell",

	    plugin_insertdate_dateFormat : "%Y-%m-%d",

	    plugin_insertdate_timeFormat : "%H:%M:%S",

		extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout],font[face|size|color]"

	});

</script>

<!-- /tinyMCE -->

</head>

<body>

<a href="example_simple.htm">[Simple example]</a> <a href="example_advanced.htm">[Advanced example]</a> <a href="example_mail.htm">[Mail example]</a> [Full featured example]

<form method="post" action="http://tinymce.moxiecode.com/examples/dump.php">

<h3>Full featured example</h3>

This page shows all available plugins that are included in the TinyMCE distribution. Some of these plugins will only be visible on MSIE due to the lack of some support in FF. For more details on the various options on TinyMCE check the <a href="../docs/index.htm">manual</a> or for more third party plugins check the plugin section.

<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">

	Some <strong>element</strong>, this is to be editor 1.

	<p>Some paragraph. <a title="Some popup link title" href="#" target="http://tinymce.moxiecode.com" onclick="window.open('http://www.sourceforge.net/','popup','left='+(screen.availWidth/2-320)+',top='+(screen.availHeight/2-240)+',width=640,height=480,resizable=yes');return false;">Some popup link</a></p>

	<img width="250" height="48" border="0" onmouseover="this.src='logo_over.jpg';" onmouseout="this.src='logo.jpg';" src="logo.jpg" />

</textarea>

<br />

<input type="submit" name="save" value="Submit" />

<input type="reset" name="reset" value="Reset" />

</form>

</body>

</html>
--- NEW FILE: example_mail.htm ---
<html>

<head>

<link href="../docs/style.css" rel="stylesheet" type="text/css">

<!-- tinyMCE -->

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

	tinyMCE.init({

		theme : "advanced",

		mode : "textareas",

		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,formatselect,fontselect,fontsizeselect,forecolor",

		extended_valid_elements : "font[face|size|color]"

	});

</script>

<!-- /tinyMCE -->

</head>

<body>

 <a href="example_simple.htm">[Simple example]</a> <a href="example_advanced.htm">[Advanced example]</a> [Mail example] <a href="example_full.htm">[Full featured example]</a>

 <h3>Mail example</h3>

This example shows how to enable the font face and size select boxes for usage in online email systems and other situations where CSS classes is impossible to use. But for contents used on websites I suggest using the CSS approach.

Read more about the features and possible settings of TinyMCE in the <a href="../docs/index.htm">manual</a>.<br>

<br>

<!-- Form with textare element with width: 100% -->

<form method="post" action="post.php">

<textarea id="elm1" name="elm2" style="width:100%" rows="15">

	<h3>Test mail header 3</h3>

	Some <b>element</b>. <br /> This editor instance has a 100% width to it.

	<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>

	<img src="logo.jpg">

</textarea>

</form>

</body>

</html>
--- NEW FILE: example_simple.htm ---
<html>

<head>

<link href="../docs/style.css" rel="stylesheet" type="text/css">

<!-- tinyMCE -->

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

	tinyMCE.init({

		mode : "textareas"

	});

</script>

<!-- /tinyMCE -->

</head>

<body>

[Simple example] <a href="example_advanced.htm">[Advanced example]</a> <a href="example_mail.htm">[Mail example]</a> <a href="example_full.htm">[Full featured example]</a>

<form>

<h3>Simple example</h3>

This page shows how to use TinyMCE on a HTML page in the most common and simple way. On this page each TEXTAREA

element gets converted to a editor instance on page load. Notice how TinyMCE tries to match the width and height of the old text area elements. Read more about the features and settings of TinyMCE in the <a href="../docs/index.htm">manual</a>.

<textarea id="elm1" name="elm1" rows="10" cols="40">

	Some <b>element</b>, this is to be editor 1.

	<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>

	<img src="logo.jpg">

</textarea>

<br><br>

<textarea id="elm2" name="elm2" rows="15" cols="32">

	Some <b>element</b>, this is to be editor 1.

	<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>

	<img src="logo.jpg">

</textarea>

</form>

</body>

</html>
--- NEW FILE: logo.jpg ---
ÿØÿà
ÿÀ
bIWi1¹¨Ô*APmº]ÖàÒq*ÐCÊ( zP`9

¡Wë@XÇÆÈÊµÍ)èE,l9«)¨ª·DLbäèY4ø¨Ï	Xe$E0³Fäs
ëu6ëcTµz?KL½Ë3êT5Ùâ(½ø|ZÊc!Løúùºú|@5ö?NTiV
h
Fò²ìêøSP
=T@eøØí ý1÷ÛáR
åà8Ê¤Z
#Éµ¸O4¡£F<ôewÒê5züî:ÉÔè-YµHª¹ Sr2x!âvåI Í ðá¦`8þ¤¢HÇ îqªteå%Fª0ülù6è¨6ôØ³{u^ößýºÝÎöSÚqfà#ü5³µër´¿ÉG»3YÒàõâü

h@) ØpyV|,F70¯|-ý)@DÛ~ÿ
-ÆO®½Ú÷
±Ð/ÈuázÁ¼ëNI¦ûkoË½$§ÈÚùmûöVÝµ|¯"
©äG¬?R8Øi}ãôõècÈºyËø`§X¿oq³¹IÂ~Y#ñø÷O5ÝF4;n )ºNÝ¹°cTü@P§Ü5×.ÆÜyIÑèu8íøØ{8qI·xì{²b¦½y9Æ°#ñPH7ÔÊÆ¼ÚÁ¹ëï¨Ý·*qµýôãO~ýÇMÉW±}$«F[Ü[Ûñô¯±¡¦ïÍù¿¿¶ }X
h@) Ð
zP
hÖ 
h@Fî±¡wà¢ÒË+M!v?!è(
ÓÛÈ¼¯îaX%nOZc~qTOC`¿¹lÉ»Ì]ä2Í#~hx3qÊ±<5¯'ÖÝ¥9:òÑT_íe+Ó<ä,N@Ó&+©E[èíiåÛð#êîk®ÿ
²*³éúr¢	*OÊÕa\I®£ïøym>sðømå{;·çnùgÁ3'o/)Q&uXÕF°q¦Ümq¸[I¤¾Äkr&¥6Ó¯ywÃ2ã77XS$nX<ÁäYUPn4»vÊ¡üÄsåUÊ¢iÓ¯áùj[ªV¨ë$¾í>FDÛvØ§%®Ù{l¸Ñ+Ä:ñµô¾6¡\ü.NWl¶ìuø¦n'jÜñºF.ofêñ7ì¶E+Å,lÊÒ¨kðoñÃ;\øW#ÿ
h@) Ð
zP
hÖ 
h@kçÀ97Ó«Sëð¨  ;|Ã)ûOýRG8ü ý¢tÄ#øÔÒ"ÆºWøÐh4w&æüè@0 P
Æçá@Ho
>D²aãßF3;4h2ªMìª¨$ê¤¹6©]U#/1ooÆüªÄøñ$Èæ&Ä@üÆ«Çþ*ÿÙ
--- NEW FILE: logo_over.jpg ---
ÿØÿà
W0¥]yHøÊI¸ìIö¯ËÅR8ÅÕZ
W0¥6¨¬)Ix_§Ñ(R
P¹cv<)IÂÂÔáÆ_f>¾¤³Iôs
R£¦gëýXR¾dîáJl8òÉô
RRð¥YñíÆÝ¸¶îÅâaJÛÖÝÁtHy]·òzP£!7ä¹cï	?°GSõL¯'¦æôÿ
U¬å8b¤òqfï_,¿R¨`ªW0¥s
W0¥I»}ÅÁ !åü{¯1öcì>ëÕh|)CáJæ¦Âu)/ôú0¥¿v¡Í(WÅþË
S.®Âæú°¥>|)Jw}®¦bvÌ&¤0¥¾xqÙáxR¶®è!æ4{XâìMdy0H¨ms.÷v
RxR'6¡IAåY£/z,)QG¶e¦àoÚ÷½_ú·
¥38°,ÿ
WVúm³&ÝÖW¿<¹º«R·qå·Ä1xCìð¥wÂß('³\8t1æaJô»¿Õ
R^°'x"
R¾¤ üOèð¥7p1¹sF_
RDæÂ× ÌF,¾ó
W¹<þ[úÄ

«·$¤mÀòä{®ó*º,È2èÜtv)ØIÛG»oùòýÿ
vË_Øèu>Æ='b}F9'óýL>Çåzóýâ#ÕÉO¯ÛKÁ¬¦Z¢&M5¾ôþä´§ô®ñÌËlÙë¾`ã|'¯wFßQo¡·Vø¶ÕÆz}hÝ?aë6ý¼ÂdtÃíÿ
¡}4_l7Y¯E^y0Jì]ð£iÊiõµgðËgÃÈiW1z,úÎa¾ï·Eí?qAçh-h^Þq zÛ6Â
ãûT{î[|øttPê?o¯çú¼kE3É<}O å¼£x¸²Êfç/ð¿7áãô¢¾ªÎæ?µXÞÿ
v{}¹S<ûß¨¯$\õ>ÛW}8ää«=·æ;Æ«(8Úöþï¾['#·}vèË^Ú:Ý£´Ìiêg÷>åÓÃñX¢:ñ®³ÉôâiÝÄ²¡\·2_îç 3¤É§PKF3mmú'îUÜ:ÿ
Wµòê»ú^öç«EØb4ßÎDYN5b}ÊPª-â¨.u¤*Ùj±P4ýÁÁQúmÓ¹l RÃ,®sN*¬£!vàÖ6É4EÕs\È^k²ÆX36?ecâ·k×ù®mT¶<ÞEÑ öÅ÷*§wP)I²#ÙoR«V.º%Ê¥kVÍ.;îE·u71ª©ã`ÌÒ¨qI`êÁ³Ld.¾àÆæÂÁØ·ÊÃ#À$ÚkÃ³QW-Òã_lhëÝqÑ½ô¥Ïºi î}*
Äâ/cñ
ÚU5¯ÙJ«ÉJî$b¨X)b6¹ø.} {ÈZ(f
QXeÎiÅUd.ÜÉ¶I¢.¬ëæBó]2Áq°Áø3+x/½5vp¯pMê9´ÀZábÆÏÙê¹«°Çw2cËF!üÌdCHºöHc"¥KÐÐJTDÐÀ©G~NTC!FÃeõ²ª9Ùn]M¤Á¬I·+Yÿ
Nl)Mr7qÓ/¼çÂÏ(¡s}XR>¥L±òáJ¸7§wâáJcwÝøXRG»
QãìñeR·q ÚcX4úøÕFô&¤Z0óv¬V¯¾l7Ñqm q÷Cã½ï§ó¶ú÷dÇ×U¥ýtþ
î¶®êÂI¡é£àÿ
Vü@6${lll~66÷¿õIuÄ¡lwÃ=w¾á¯³ÔÂ%í&RéªH6mhdó+Xë²¢+ZÕxÓíÛKé)"h¸.7Çcæk#

[Phpslash-commit] CVS: phpslash-dev/public_html/scripts/tinymce/examples dump.php,NONE,1.1 example_a

[Phpslash-commit] CVS: phpslash-dev/public_html/scripts/tinymce/examples dump.php,NONE,1.1 example_advanced.css,NONE,1.1 example_advanced.htm,NONE,1.1 example_full.htm,NONE,1.1 example_mail.htm,NONE,1.1 example_simple.htm,NONE,1.1 logo.jpg,NONE,1.1 logo_over.jpg,NONE,1.1