89 lines
4.0 KiB
HTML
89 lines
4.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Full featured example</title>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<script src="js/tinymce_loader.js"></script>
|
||
|
|
<script>
|
||
|
|
tinymce.init({
|
||
|
|
// General options
|
||
|
|
mode : "textareas",
|
||
|
|
plugins : "pagebreak,layer,table,save,emoticons,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,tabfocus",
|
||
|
|
|
||
|
|
// Theme options
|
||
|
|
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
|
||
|
|
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
|
||
|
|
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emoticons,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
|
||
|
|
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
|
||
|
|
theme_advanced_toolbar_location : "top",
|
||
|
|
theme_advanced_toolbar_align : "left",
|
||
|
|
theme_advanced_statusbar_location : "bottom",
|
||
|
|
theme_advanced_resizing : true,
|
||
|
|
|
||
|
|
add_unload_trigger : 0
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<!-- /TinyMCE -->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<form method="post" action="http://www.tinymce.com/dump.php?example=true">
|
||
|
|
<div>
|
||
|
|
<h3>Full featured example</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
This page shows all available buttons and plugins that are included in the TinyMCE core package.
|
||
|
|
There are more examples on how to use TinyMCE in the <a href="http://wiki.moxiecode.com/examples/tinymce/">Wiki</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
|
||
|
|
<div>
|
||
|
|
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
|
||
|
|
<p>text1 <span style="color:red">middle</span> text2</p>
|
||
|
|
<p><b><em>xyz<span style="color:red">---</span>123</em></b></p>
|
||
|
|
<p><b><em>xyz<span style="color:green">---</span>123</em></b></p>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td><span style="color:green"><b>bold 1</b><em>italic 1</em></span></td>
|
||
|
|
<td><b>bold 2</b><em>italic 2</em></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><b>bold 3</b><em><a href="#">italic 3</a></em></td>
|
||
|
|
<td><b>bold 4</b><em>italic 4</em></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<p><b><em>xyz<span style="color:red">---</span>123</em></b></p>
|
||
|
|
<ul>
|
||
|
|
<li><b><em>test 1</em></b><b><em>test 2</em></b></li>
|
||
|
|
<li><b><em>test 1</em></b><b><em>test 2</em></b></li>
|
||
|
|
</ul>
|
||
|
|
<p><b><em>xyz<span style="color:green">---</span>123</em></b></p>
|
||
|
|
<p>text 1</p>
|
||
|
|
<p>text 2</p>
|
||
|
|
<p>text 3</p>
|
||
|
|
<p>text 4</p>
|
||
|
|
</textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Some integration calls -->
|
||
|
|
<a href="javascript:;" onmousedown="tinymce.get('elm1').show();">[Show]</a>
|
||
|
|
<a href="javascript:;" onmousedown="tinymce.get('elm1').hide();">[Hide]</a>
|
||
|
|
<a href="javascript:;" onmousedown="tinymce.get('elm1').execCommand('Bold');">[Bold]</a>
|
||
|
|
<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').getContent());">[Get contents]</a>
|
||
|
|
<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').getContent({format:'raw'}));">[Get raw]</a>
|
||
|
|
<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getContent());">[Get selected HTML]</a>
|
||
|
|
<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getContent({format : 'text'}));">[Get selected text]</a>
|
||
|
|
<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getNode().nodeName);">[Get selected element]</a>
|
||
|
|
<a href="javascript:;" onmousedown="tinymce.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
|
||
|
|
<a href="javascript:;" onmousedown="tinymce.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<input type="submit" name="save" value="Submit" />
|
||
|
|
<input type="reset" name="reset" value="Reset" />
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|