250 lines
13 KiB
HTML
250 lines
13 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Editor Preview Test</title>
|
|
|
|
<style type="text/css">
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
|
@import "../plugins/resources/css/Preview.css";
|
|
</style>
|
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("dijit.Editor");
|
|
dojo.require("dojo.parser");
|
|
dojo.require("dojox.editor.plugins.Preview");
|
|
|
|
// Calculate the location of the test stylesheet to apply to the preview.
|
|
var _calcBaseUrl = function(fullUrl) {
|
|
var baseUrl = null;
|
|
if (fullUrl !== null) {
|
|
var index = fullUrl.indexOf("?");
|
|
if (index != -1) {
|
|
fullUrl = fullUrl.substring(0,index);
|
|
}
|
|
index = fullUrl.lastIndexOf("/");
|
|
if (index > 0 && index < fullUrl.length) {
|
|
baseUrl = fullUrl.substring(0,index);
|
|
}else{
|
|
baseUrl = fullUrl;
|
|
}
|
|
}
|
|
return baseUrl;
|
|
}
|
|
var baseUrl = _calcBaseUrl(window.location.href);
|
|
var sSheets = [ baseUrl + "/testBodySheet.css", baseUrl + "/testContentSheet.css"]
|
|
var sSheets1 = [ baseUrl + "/testContentSheet.css"]
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<br>
|
|
<h1 class="testTitle">Editor + Preview Plugin</h1>
|
|
|
|
<h2>These are example editors with Preview enabled</h2>
|
|
The Preview plugin is a visual 'helper' plugin. When clicked, it opens a new window with the contents of the editor
|
|
plus any denoted stylesheets and/or styles applied to the page. This is useful for when you are editing content
|
|
that will be displayed with styles different from what the editor applies. When you click preview, a new window will open
|
|
with the styled content. The styles chosen are not necessarily pretty, just something to make it very obvious styles are being applied.
|
|
<br>
|
|
<br>
|
|
|
|
<h3>Preview styled with inline styles</h3>
|
|
<div dojoType="dijit.Editor" id="editor1"
|
|
extraPlugins="[{name: 'preview', styles: 'body {background-color: #657383; color: white;} p {background-color: #606070; border-style: inset; border-width: 1px; border-color: #5F5A59; padding: 5px 5px 5px 5px;} center {background-color: #800517; font-weight: bold; font-style: italic; border-style: outset; border-width: 1px; border-color: #800010;} h3 {border-style: outset; border-width: 1px;}'}]">
|
|
This instance is created from a div with an extra plugin, 'Preview', loaded.
|
|
<div>
|
|
<ul>
|
|
<li>List Item One</li>
|
|
<li>List Item Two</li>
|
|
<li>List Item Three</li>
|
|
<li>List Item Four</li>
|
|
</ul>
|
|
<br>
|
|
<a href="http://www.dojotoolkit.org">The Dojo Toolkit</a>
|
|
<br>
|
|
<br>
|
|
<ol>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
</ol>
|
|
<br>
|
|
<br>
|
|
<h3>A bunch of Lorum Ipsum Text:</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget turpis nunc.
|
|
Praesent ut metus ac mi gravida lobortis vel quis nulla. Sed elementum elit eget
|
|
ante viverra consectetur. Praesent pulvinar faucibus risus in pulvinar. Sed auctor,
|
|
dui sed suscipit semper, metus sapien feugiat urna, et auctor nisi est quis purus.
|
|
Aliquam eu tortor eu ante venenatis pellentesque nec sed massa. Nulla feugiat, nunc
|
|
ac aliquet elementum, lacus odio dictum nisl, vel molestie neque tellus eget nibh.
|
|
Curabitur et eros quam, non consectetur erat. Class aptent taciti sociosqu ad litora
|
|
torquent per conubia nostra, per inceptos himenaeos. Quisque luctus imperdiet felis,
|
|
a mollis sapien scelerisque ut. Quisque dui neque, vulputate eu consectetur et, fermentum
|
|
id est. Nulla euismod lorem at massa aliquam at cursus mi fermentum. Quisque rhoncus
|
|
ornare pharetra. Cras vestibulum convallis nisl, eget ultrices sem porta eget. Duis
|
|
in dolor id nibh volutpat sodales. Nullam eleifend, sapien accumsan convallis tincidunt,
|
|
justo mi pellentesque dolor, in suscipit dolor quam ac ligula.
|
|
</p>
|
|
<p>
|
|
Ut molestie facilisis nisi sed consequat. Nunc in turpis quam, vel elementum lectus.
|
|
Suspendisse vel consequat augue. Praesent id orci orci. Praesent est tortor, consequat
|
|
eu posuere nec, volutpat ac diam. Cras pretium quam non diam dictum tincidunt. Mauris
|
|
aliquet lacinia odio vitae elementum. Nam rutrum semper metus, in consectetur lectus
|
|
aliquam a. Maecenas pharetra nibh nec leo consequat vitae rhoncus nibh volutpat.
|
|
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
|
mus. Sed at odio turpis, sit amet molestie nisl. Curabitur in ligula id tortor feugiat
|
|
semper. Vestibulum id nunc magna, eu lacinia nibh. Ut congue adipiscing dictum.
|
|
</p>
|
|
<p>
|
|
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia
|
|
nostra, per inceptos himenaeos. Phasellus in orci purus, sed aliquet quam. Aenean
|
|
ultrices tincidunt augue, in feugiat massa dignissim in. Nunc a dolor eu mi fringilla
|
|
laoreet. Praesent lacinia mi eu sapien imperdiet dignissim. Praesent a pellentesque
|
|
est. Sed augue eros, porttitor nec consequat bibendum, mattis lobortis diam. Sed
|
|
at massa ante. In volutpat ultrices mattis. Vestibulum tempus pretium risus quis
|
|
aliquet. Donec non ante vitae orci euismod eleifend. Aliquam at metus quis turpis
|
|
pharetra porta. Sed dignissim risus in erat aliquam et posuere nulla molestie. Nunc
|
|
iaculis lectus eget augue sollicitudin gravida ac non nisl. Vivamus bibendum gravida
|
|
vehicula. Aliquam vitae mi ligula. Nulla at augue velit, vitae ultricies libero.
|
|
Proin at lorem turpis.
|
|
</p>
|
|
<center>Centered Text</center>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<h3>Preview styled with external stylesheet</h3>
|
|
<div dojoType="dijit.Editor" id="editor3"
|
|
extraPlugins="[{name: 'preview', stylesheets: sSheets}]">
|
|
This instance is created from a div with an extra plugin, 'Preview', loaded and is styled in preview via external stylesheets.
|
|
<div>
|
|
<ul>
|
|
<li>List Item One</li>
|
|
<li>List Item Two</li>
|
|
<li>List Item Three</li>
|
|
<li>List Item Four</li>
|
|
</ul>
|
|
<br>
|
|
<a href="http://www.dojotoolkit.org">The Dojo Toolkit</a>
|
|
<br>
|
|
<br>
|
|
<ol>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
</ol>
|
|
<br>
|
|
<br>
|
|
<h3>A bunch of Lorum Ipsum Text:</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget turpis nunc.
|
|
Praesent ut metus ac mi gravida lobortis vel quis nulla. Sed elementum elit eget
|
|
ante viverra consectetur. Praesent pulvinar faucibus risus in pulvinar. Sed auctor,
|
|
dui sed suscipit semper, metus sapien feugiat urna, et auctor nisi est quis purus.
|
|
Aliquam eu tortor eu ante venenatis pellentesque nec sed massa. Nulla feugiat, nunc
|
|
ac aliquet elementum, lacus odio dictum nisl, vel molestie neque tellus eget nibh.
|
|
Curabitur et eros quam, non consectetur erat. Class aptent taciti sociosqu ad litora
|
|
torquent per conubia nostra, per inceptos himenaeos. Quisque luctus imperdiet felis,
|
|
a mollis sapien scelerisque ut. Quisque dui neque, vulputate eu consectetur et, fermentum
|
|
id est. Nulla euismod lorem at massa aliquam at cursus mi fermentum. Quisque rhoncus
|
|
ornare pharetra. Cras vestibulum convallis nisl, eget ultrices sem porta eget. Duis
|
|
in dolor id nibh volutpat sodales. Nullam eleifend, sapien accumsan convallis tincidunt,
|
|
justo mi pellentesque dolor, in suscipit dolor quam ac ligula.
|
|
</p>
|
|
<p>
|
|
Ut molestie facilisis nisi sed consequat. Nunc in turpis quam, vel elementum lectus.
|
|
Suspendisse vel consequat augue. Praesent id orci orci. Praesent est tortor, consequat
|
|
eu posuere nec, volutpat ac diam. Cras pretium quam non diam dictum tincidunt. Mauris
|
|
aliquet lacinia odio vitae elementum. Nam rutrum semper metus, in consectetur lectus
|
|
aliquam a. Maecenas pharetra nibh nec leo consequat vitae rhoncus nibh volutpat.
|
|
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
|
mus. Sed at odio turpis, sit amet molestie nisl. Curabitur in ligula id tortor feugiat
|
|
semper. Vestibulum id nunc magna, eu lacinia nibh. Ut congue adipiscing dictum.
|
|
</p>
|
|
<p>
|
|
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia
|
|
nostra, per inceptos himenaeos. Phasellus in orci purus, sed aliquet quam. Aenean
|
|
ultrices tincidunt augue, in feugiat massa dignissim in. Nunc a dolor eu mi fringilla
|
|
laoreet. Praesent lacinia mi eu sapien imperdiet dignissim. Praesent a pellentesque
|
|
est. Sed augue eros, porttitor nec consequat bibendum, mattis lobortis diam. Sed
|
|
at massa ante. In volutpat ultrices mattis. Vestibulum tempus pretium risus quis
|
|
aliquet. Donec non ante vitae orci euismod eleifend. Aliquam at metus quis turpis
|
|
pharetra porta. Sed dignissim risus in erat aliquam et posuere nulla molestie. Nunc
|
|
iaculis lectus eget augue sollicitudin gravida ac non nisl. Vivamus bibendum gravida
|
|
vehicula. Aliquam vitae mi ligula. Nulla at augue velit, vitae ultricies libero.
|
|
Proin at lorem turpis.
|
|
</p>
|
|
<center>Centered Text</center>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<h3>Preview styled with external stylesheet and defined styles</h3>
|
|
<div dojoType="dijit.Editor" id="editor2"
|
|
extraPlugins="[{name: 'preview', styles: 'body {background-color: #657383; color: white;}', stylesheets: sSheets1}]">
|
|
This instance is created from a div with an extra plugin, 'Preview', loaded and is styled in preview via an external stylesheet as well as inline styles.
|
|
<div>
|
|
<ul>
|
|
<li>List Item One</li>
|
|
<li>List Item Two</li>
|
|
<li>List Item Three</li>
|
|
<li>List Item Four</li>
|
|
</ul>
|
|
<br>
|
|
<a href="http://www.dojotoolkit.org">The Dojo Toolkit</a>
|
|
<br>
|
|
<br>
|
|
<ol>
|
|
<li>One</li>
|
|
<li>Two</li>
|
|
</ol>
|
|
<br>
|
|
<br>
|
|
<h3>A bunch of Lorum Ipsum Text:</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget turpis nunc.
|
|
Praesent ut metus ac mi gravida lobortis vel quis nulla. Sed elementum elit eget
|
|
ante viverra consectetur. Praesent pulvinar faucibus risus in pulvinar. Sed auctor,
|
|
dui sed suscipit semper, metus sapien feugiat urna, et auctor nisi est quis purus.
|
|
Aliquam eu tortor eu ante venenatis pellentesque nec sed massa. Nulla feugiat, nunc
|
|
ac aliquet elementum, lacus odio dictum nisl, vel molestie neque tellus eget nibh.
|
|
Curabitur et eros quam, non consectetur erat. Class aptent taciti sociosqu ad litora
|
|
torquent per conubia nostra, per inceptos himenaeos. Quisque luctus imperdiet felis,
|
|
a mollis sapien scelerisque ut. Quisque dui neque, vulputate eu consectetur et, fermentum
|
|
id est. Nulla euismod lorem at massa aliquam at cursus mi fermentum. Quisque rhoncus
|
|
ornare pharetra. Cras vestibulum convallis nisl, eget ultrices sem porta eget. Duis
|
|
in dolor id nibh volutpat sodales. Nullam eleifend, sapien accumsan convallis tincidunt,
|
|
justo mi pellentesque dolor, in suscipit dolor quam ac ligula.
|
|
</p>
|
|
<p>
|
|
Ut molestie facilisis nisi sed consequat. Nunc in turpis quam, vel elementum lectus.
|
|
Suspendisse vel consequat augue. Praesent id orci orci. Praesent est tortor, consequat
|
|
eu posuere nec, volutpat ac diam. Cras pretium quam non diam dictum tincidunt. Mauris
|
|
aliquet lacinia odio vitae elementum. Nam rutrum semper metus, in consectetur lectus
|
|
aliquam a. Maecenas pharetra nibh nec leo consequat vitae rhoncus nibh volutpat.
|
|
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
|
mus. Sed at odio turpis, sit amet molestie nisl. Curabitur in ligula id tortor feugiat
|
|
semper. Vestibulum id nunc magna, eu lacinia nibh. Ut congue adipiscing dictum.
|
|
</p>
|
|
<p>
|
|
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia
|
|
nostra, per inceptos himenaeos. Phasellus in orci purus, sed aliquet quam. Aenean
|
|
ultrices tincidunt augue, in feugiat massa dignissim in. Nunc a dolor eu mi fringilla
|
|
laoreet. Praesent lacinia mi eu sapien imperdiet dignissim. Praesent a pellentesque
|
|
est. Sed augue eros, porttitor nec consequat bibendum, mattis lobortis diam. Sed
|
|
at massa ante. In volutpat ultrices mattis. Vestibulum tempus pretium risus quis
|
|
aliquet. Donec non ante vitae orci euismod eleifend. Aliquam at metus quis turpis
|
|
pharetra porta. Sed dignissim risus in erat aliquam et posuere nulla molestie. Nunc
|
|
iaculis lectus eget augue sollicitudin gravida ac non nisl. Vivamus bibendum gravida
|
|
vehicula. Aliquam vitae mi ligula. Nulla at augue velit, vitae ultricies libero.
|
|
Proin at lorem turpis.
|
|
</p>
|
|
<center>Centered Text</center>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|