200 lines
12 KiB
HTML
200 lines
12 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
|
|
<!--
|
||
|
|
* WYMeditor : what you see is What You Mean web-based editor
|
||
|
|
* Copyright (c) 2005 - 2009 Jean-Francois Hovinne, http://www.wymeditor.org/
|
||
|
|
* Dual licensed under the MIT (MIT-license.txt)
|
||
|
|
* and GPL (GPL-license.txt) licenses.
|
||
|
|
*
|
||
|
|
* For further information visit:
|
||
|
|
* http://www.wymeditor.org/
|
||
|
|
*
|
||
|
|
* File Name:
|
||
|
|
* 17-pretty-theme.html
|
||
|
|
* WYMeditor integration example.
|
||
|
|
* See the documentation for more info.
|
||
|
|
*
|
||
|
|
* File Authors:
|
||
|
|
* Jean-Francois Hovinne - http://www.hovinne.com/
|
||
|
|
* Gyuris Gellért - http://bubu.ujevangelizacio.hu/bubu
|
||
|
|
* Philipp Cordes (pc a-t irgendware dotnet)
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<title>WYMeditor</title>
|
||
|
|
<!-- jQuery library is required, see http://jquery.com/ -->
|
||
|
|
<script type="text/javascript" src="../jquery/jquery.js"></script>
|
||
|
|
<!-- WYMeditor main JS file, minified version -->
|
||
|
|
<script type="text/javascript" src="../wymeditor/jquery.wymeditor.min.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
/* Here we replace default theme to pretty.
|
||
|
|
*/
|
||
|
|
|
||
|
|
jQuery(function() {
|
||
|
|
jQuery('.wymeditor').wymeditor({
|
||
|
|
iframeBasePath: "../wymeditor/iframe/pretty/",
|
||
|
|
postInit: function(wym) {
|
||
|
|
//construct the button's html
|
||
|
|
var html = "<li class=\"wym_tools_toogle_pretty_theme\">"
|
||
|
|
+ "<a name=\"TogglePrettyTheme\" href=\"#\""
|
||
|
|
+ " title=\"Toggle short and verbose theme style\""
|
||
|
|
+ " style=\"background-image:"
|
||
|
|
+ " url(../wymeditor/iframe/pretty/icon.png)\">"
|
||
|
|
+ "Toggle short and verbose theme style"
|
||
|
|
+ "</a></li>";
|
||
|
|
//add the button to the tools box
|
||
|
|
jQuery(wym._box)
|
||
|
|
.find(wym._options.toolsSelector + wym._options.toolsListSelector)
|
||
|
|
.append(html);
|
||
|
|
//handle click event
|
||
|
|
jQuery(wym._box)
|
||
|
|
.find('li.wym_tools_toogle_pretty_theme a').click(function() {
|
||
|
|
wym.toggleClass('short', 'BODY' );
|
||
|
|
return(false);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>WYMeditor integration example</h1>
|
||
|
|
<p><a href="http://www.wymeditor.org/">WYMeditor</a> is a web-based XHTML WYSIWYM editor.</p>
|
||
|
|
<form method="post" action="">
|
||
|
|
<textarea class="wymeditor">
|
||
|
|
|
||
|
|
<p>Paragraph &lt;p&gt; • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus tellus, ultrices ac tristique vitae, laoreet et ante. Aliquam elit velit, porta sed volutpat vitae, sodales in dolor. Vestibulum eros odio, gravida et bibendum et, accumsan imperdiet eros. In at mauris nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ultrices interdum velit, sit amet lacinia massa varius in. Sed vulputate dapibus nulla, et tincidunt urna faucibus eu. </p>
|
||
|
|
<p class="some">Paragraph &lt;p&gt; with class "some" • Nullam bibendum rhoncus ullamcorper. Aliquam vitae ullamcorper metus. Phasellus vitae ipsum tortor, accumsan cursus nunc.</p>
|
||
|
|
<h1>Heading 1 &lt;h1&gt;</h1>
|
||
|
|
<h1 class="first">Heading 1 &lt;h1&gt; with class "first"</h1>
|
||
|
|
<h2>Heading 2 &lt;h2&gt;</h2>
|
||
|
|
<h2 class="other">Heading 2 &lt;h2&gt; with class "other"</h2>
|
||
|
|
<h2><a href="#">Linked Heading 2 </a>&lt;h2&gt;</h2>
|
||
|
|
<h3>Heading 3 &lt;h3&gt;</h3>
|
||
|
|
<h4>Heading 4 &lt;h4&gt;</h4>
|
||
|
|
<h5>Heading 5 &lt;h5&gt;</h5>
|
||
|
|
<h6>Heading 6 &lt;h6&gt;</h6>
|
||
|
|
<div>Division, section &lt;div&gt; • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||
|
|
<div class="messages error">Division, section &lt;div&gt; with class "messages error" • Vivamus metus orci, consectetur a consectetur sed, malesuada sed ligula. Nunc nibh quam, tempor sagittis rhoncus quis, placerat a elit.</div>
|
||
|
|
<address>Address &lt;address&gt; • Suspendisse laoreet pellentesque nibh id gravida. </address>
|
||
|
|
<blockquote cite="#">Quoted section &lt;blockquote&gt; • Donec vulputate pretium egestas. Vivamus faucibus ultrices elit, sit amet dignissim mauris semper at. Mauris laoreet nisi sed dolor volutpat sagittis. Proin euismod varius nisl ut interdum. Maecenas tempor, ipsum placerat suscipit malesuada, sem ipsum ullamcorper purus, eu eleifend tortor ante ac arcu. </blockquote>
|
||
|
|
<blockquote><p>Nested paragraph in quoted section • Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</blockquote>
|
||
|
|
<pre>Preformatted text &lt;pre&gt; •
|
||
|
|
Proin hendrerit felis
|
||
|
|
vitae urna bibendum commodo.
|
||
|
|
Cras non augue vitae metus ullamcorper porttitor at et nisl.
|
||
|
|
Quisque dui lacus, vestibulum at placerat vitae, dignissim ac erat.</pre>
|
||
|
|
|
||
|
|
<p>Inline elements: strong, em, a href, span, abbr, acronym, q, cite, kbd, samp, var, dfn, code, del, ins, sup, sub • Lorem ipsum
|
||
|
|
<strong>important text &lt;strong&gt; and &lt;b&gt; • dolor sit amet</strong>, consectetur
|
||
|
|
<em>emphasized text &lt;em&gt; and &lt;i&gt; • adipiscing elit</em>. Vestibulum
|
||
|
|
<a href="#">hyperlink &lt;a href&gt; • metus</a> tellus, ultrices ac
|
||
|
|
<span>generic inline container &lt;span&gt; • tristique vitae</span>, laoreet et ante. Sodales
|
||
|
|
<abbr title="abbr">abbreviation &lt;abbr&gt; • ALIQUAM</abbr> elit velit,
|
||
|
|
<acronym title="acronym">acronym &lt;acronym&gt; • PORTA</acronym> sed volutpat,
|
||
|
|
<q>short quotation &lt;q&gt; • Vestibulum eros odio</q>, gravida et bibendum et,
|
||
|
|
<cite>title of a work &lt;cite&gt; • accumsan imperdiet</cite> eros. In at mauris
|
||
|
|
<kbd>keyboard input &lt;kbd&gt; • vitae</kbd> sodales in dolor. Cum sociis
|
||
|
|
<samp>sample output from a computer program &lt;samp&gt; • natoque penatibus</samp> et magnis dis
|
||
|
|
<var>variable &lt;var&gt; • parturient</var> montes, nascetur
|
||
|
|
<dfn>definition term &lt;dfn&gt; • ridiculus</dfn> mus. Praesent
|
||
|
|
<code>computer code &lt;code&gt; • torqueo jumentum dolus esca</code> suscipit,
|
||
|
|
<del>deleted text &lt;del&gt; • ultrices</del> velit, sit amet
|
||
|
|
<ins>inserted text &lt;ins&gt; • acinia massa varius</ins> in. Sed vulputate dapibus nulla, et
|
||
|
|
<sup>supscript text &lt;sup&gt; • tincidunt</sup> urna faucibus eu. Neo damnum aliquam
|
||
|
|
<sub>subscript text &lt;sub&gt; • consequat</sub>. Abdo genitus luptatum virtus singularis distineo validus ea. Gravis
|
||
|
|
<strong class="myinlineclass">important text &lt;strong&gt; with class "myinlineclass" • oppeto huic incassum. Vulputate hos singularis veniam zelus singularis utinam vulputate sino quidne. Nutus neque quidem. Natu interdico melior.Oppeto vulpes meus jugis ut iriure valde consectetuer</strong> abigo. Aptent bene ideo commoveo quadrum abbas. Vereor macto neo probo ille. Esse vulpes sino virtus rusticus brevitas mos. Cui ad vulputate et vero zelus feugiat os olim obruo. Facilisi quadrum proprius gravis velit humo nunc wisi imputo antehabeo.Valde dolore tation facilisi ullamcorper gemino gemino cui qui paratus. Camur in capto euismod. Brevitas vero iriure letalis valde oppeto plaga ullamcorper adipiscing inhibeo.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Ordered List</h2>
|
||
|
|
<ol>
|
||
|
|
<li>Nullam ullamcorper porta sem quis aliquet. Integer sed metus justo.</li>
|
||
|
|
<li>Lorem ipsum dolor sit amet consectetuer.</li>
|
||
|
|
<li>Neo damnum aliquam consequat. Abdo genitus luptatum virtus singularis distineo validus ea. Gravis oppeto huic incassum torqueo jumentum dolus esca suscipit. Vulputate hos singularis veniam zelus singularis utinam vulputate sino quidne. Nutus neque quidem. Natu interdico melior.Oppeto vulpes meus jugis ut iriure valde consectetuer abigo. Aptent bene ideo commoveo quadrum abbas. Vereor macto neo probo ille.</li>
|
||
|
|
<li><p>Pellentesque dui mauris, mattis id lobortis porttitor, laoreet eu dui. Vestibulum eget ligula mauris, iaculis euismod sapien.</p><p>Donec quis justo lorem.</p></li>
|
||
|
|
<li>Condimentum quis.</li>
|
||
|
|
<li>Congue Quisque augue elit dolor.
|
||
|
|
<ol>
|
||
|
|
<li>Sed at tempus enim.</li>
|
||
|
|
<li>Aliquam accumsan lorem eu dui tempus vel pellentesque magna hendrerit.</li>
|
||
|
|
<li>Donec eleifend sodales lorem at varius. Pellentesque condimentum dui scelerisque eros consectetur blandit. Etiam posuere placerat arcu ut cursus. Mauris dui ligula, porta ut tincidunt quis, ornare ut dolor. Sed sed mollis felis. Suspendisse laoreet pellentesque nibh id gravida. Pellentesque dui mauris, mattis id lobortis porttitor, laoreet eu dui. Vestibulum eget ligula mauris, iaculis euismod sapien. Donec quis justo lorem.</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
<li>Congue Quisque augue elit dolor nibh.</li>
|
||
|
|
<li>Vestibulum feugiat tempor gravida.</li>
|
||
|
|
<li>Donec vulputate pretium egestas.</li>
|
||
|
|
<li>Vivamus faucibus ultrices elit, sit amet dignissim mauris semper at.</li>
|
||
|
|
<li>Mauris laoreet nisi sed dolor volutpat sagittis.</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Unordered List</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Donec quis justo lorem.</li>
|
||
|
|
<li>Condimentum quis.</li>
|
||
|
|
<li>Congue Quisque augue elit dolor.
|
||
|
|
<ul class="special">
|
||
|
|
<li>Mauris laoreet nisi sed dolor volutpat sagittis. </li>
|
||
|
|
<li>Proin euismod varius nisl ut interdum.
|
||
|
|
<ul>
|
||
|
|
<li>Maecenas tempor, ipsum placerat suscipit malesuada, sem ipsum ullamcorper purus, eu eleifend tortor ante ac arcu.</li>
|
||
|
|
<li>Donec eleifend sodales lorem at varius.</li>
|
||
|
|
<li>Nullam ullamcorper porta sem quis aliquet. Integer sed metus justo.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Suspendisse non lorem eget lacus tincidunt mattis.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Nunc cursus sem et pretium sapien eget.</li>
|
||
|
|
</ul>
|
||
|
|
<ul></ul>
|
||
|
|
|
||
|
|
<h2>Definition List</h2>
|
||
|
|
<dl class="something">
|
||
|
|
<dt>Cras</dt>
|
||
|
|
<dd>Phasellus convallis interdum dictum. </dd>
|
||
|
|
<dd>Suspendisse lectus eros, vestibulum et sagittis eu, fringilla ac urna. Phasellus ullamcorper faucibus sapien, nec rhoncus orci gravida id. Quisque elementum leo at leo facilisis euismod. Nunc sit amet elit vitae arcu fermentum adipiscing eu at mauris.</dd>
|
||
|
|
<dt>Aenean volutpat urna a risus congue fermentum.</dt>
|
||
|
|
<dd>Curabitur id nunc ante, nec tincidunt odio. Nulla facilisi. In hac habitasse platea dictumst. Curabitur suscipit luctus aliquet. Pellentesque quis risus dolor.</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<table width="50%" border="1">
|
||
|
|
<caption>Caption • Table with border 1.</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>thead th • Aliquam</th>
|
||
|
|
<th>thead th • Quisque</th>
|
||
|
|
<th>thead th • Nunc</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>tbody tr td • Curabitur suscipit luctus aliquet.</td>
|
||
|
|
<td>tbody tr td • Nunc orci lorem, rhoncus eu elementum id, lacinia eget lorem. Nulla in neque viverra metus iaculis posuere. </td>
|
||
|
|
<td>tbody tr td • Proin id leo condimentum ipsum commodo consequat.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Neo damnum aliquam consequat.</td>
|
||
|
|
<td>Neo damnum aliquam consequat.</td>
|
||
|
|
<td>Neo damnum aliquam consequat. </td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Neo damnum aliquam consequat.</td>
|
||
|
|
<td>Neo damnum aliquam consequat. Neo damnum aliquam consequat.</td>
|
||
|
|
<td>Neo damnum aliquam consequat. Neo damnum aliquam consequat. Neo damnum aliquam consequat</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</textarea>
|
||
|
|
<input type="submit" class="wymupdate" />
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|