dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
140 lines (134 loc) • 4.63 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Editor Test: FontChoice Plugin</title>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/Editor",
"dijit/_editor/plugins/FontChoice",
"dijit/_editor/plugins/ViewSource",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body class="claro" role="main">
<br>
<br>
<div>Content before the editor.</div>
<br>
<br>
<p>Editor with default drop down lists:</p>
<div id="editor0" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor0", extraPlugins:["fontName", "fontSize", "formatBlock", "viewSource"], height: "400px", style:"background-color: white; width: 100%;"'>
<h1>Font Choice Plugin details</h1>
<ol>
<li>The Fontchoice plugin provides three dropdown menus for manipulating font information, such as
font name, font size, and the format of the block containing the text (such as P, PRE, H1, and so on)</li>
<li>It auto-updates itself based on the caret and selection position in the document.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify clicking in a P tag shows Paragraph in the dropdown.</li>
<li>Verify clicking in a a font-sized tag that the size dropdown indicates the current size (via a name).</li>
<li>Verify clicking in a a font-nameed tag that the name dropdown indicates the current font name.</li>
<li>Verify that you can set/manipulate all the above via the menu.</li>
</ol>
<br>
<p id="para0">
This is a pararaph.
</p>
<br>
<pre id="pre0">
This is preformatted text.
</pre>
<br>
<h1 id="h10">
This is a heading.
</h1>
<h2 id="h20">
This is a sub-heading.
</h2>
<h3 id="h30">
This is a sub-sub-heading.
</h3>
<br>
<p id="text">This is some text in a 'p' for styling.</p>
<p id="text1">This is some more text in a 'p' for styling.</p>
<br>
<font id="sizedText1" size="1">This is some small text.</font>
<br>
<font id="sizedText4" size="4">This is some mediumish text.</font>
<br>
<font id="sizedText7" size="7">This is some xx-large text.</font>
<br>
<font face="'Comic Sans MS'" id="comicText">This is some text in 'Comic Sans MS'</font>.
<br>
<br>
<br>
<h1 style="background-color: lightgray">Selection format removal test</h1>
<div id="selectionContainer">
<h3>
Some H3 formatted content.
</h3>
<pre>
Some PRE formatted content.
</pre>
<p>
Some P formatted content.
</p>
</div>
</div>
<br>
<br>
<div>Content after the editor.</div>
<br>
<br>
<div>Content before the editor.</div>
<br>
<br>
<p>Editor w/ plain text dropdown values:</p>
<div id="editor1" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor1", extraPlugins:[{name: "fontName", plainText: true}, {name: "fontSize", plainText: true}, {name: "formatBlock", plainText: true}, "viewSource"], style:"background-color: white; width: 100%;", height: "400px"'>
<h1>Font Choice Plugin details</h1>
<ol>
<li>This instance of the FontChoice plugin just turns off formatted content in the dropdowns. Everything should be the same font and size.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that each of the dropdowns have values that are all the same size and font.</li>
</ol>
</div>
<br>
<br>
<div>Content after the editor.</div>
<br>
<br>
<p>Editor w/ generic (web font names) font selector, traditional font name selector, font size selector, and format block selector:</p>
<div id="generic" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"generic", height:"10em",
plugins:["bold", "italic", "underline", {name: "dijit/_editor/plugins/FontChoice", command: "fontName", generic: true}, "fontName", "fontSize", "formatBlock"]'>hello world</div>
<br>
<br>
<div>Content after the editor.</div>
<br>
<br>
<div>Content before the editor.</div>
<br>
<br>
<p>Editor w/ custom font drop down list:</p>
<div id="custom" data-dojo-type="dijit/Editor" data-dojo-props='"aria-label":"custom", height:"10em",
plugins:["bold", "italic", "underline", {name: "dijit/_editor/plugins/FontChoice", command: "fontName", custom:["Verdana","Myriad","Garamond"]}]'>
This editor should let you set the fonts to
<span style="font-family:Verdana;">Verdana</span>, <span style="font-family:Myriad;">Myriad</span>, and <span style="font-family:Garamond;">Garamond</span>.
</div>
<br>
<br>
<div>Content after the editor.</div>
<br>
<br>
</body>
</html>