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
216 lines (194 loc) • 9.43 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Editor Test</title>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojo/parser", // scan page for widgets and instantiate them
"dijit/Editor",
"dijit/_editor/_Plugin",
"dijit/_editor/plugins/AlwaysShowToolbar",
"dijit/_editor/plugins/FontChoice", // 'fontName','fontSize','formatBlock'
"dijit/_editor/plugins/TextColor",
"dijit/_editor/plugins/LinkDialog",
"dojo/NodeList-dom", // orphan()
"dojo/domReady!"
], function(declare, parser, Editor, _Plugin){
// Dummy simple plugin for testing that filters registered this way work
// properly with content setting on load.
declare("TestFilter", _Plugin, {
setEditor: function(editor){
this.editor = editor;
this.editor.contentPreFilters.push(function(val){
if(val){
val = val.replace("notdojo", "DOJO");
}
return val;
});
}
});
parser.parse();
var progEditor = new Editor({
value: "Custom Initial Content.",
"aria-label": "progEditor"
}, "programmatic3");
progEditor.startup();
var progEditor2 = new Editor({
contentPreFilters: [function(txt){ return txt; }],
"aria-label": "progEditor2"
}, "programmatic4");
progEditor2.startup();
});
</script>
</head>
<body class="claro" role="main">
<script type="dojo/require">
dom: "dojo/dom",
lang: "dojo/_base/lang",
query: "dojo/query",
registry: "dijit/registry",
Editor: "dijit/Editor"
</script>
<div data-dojo-type="dijit/Editor" data-dojo-props="plugins:[], focusOnLoad:true, height:'1.5em', style:'border:0px;','aria-label':'automated'" id="automated"
>Automated Test - all check boxes should be checked<script type='dojo/method' data-dojo-event='onFocus'>
if(!document.getElementById('onFocusFired').checked){
document.getElementById('onFocusFired').checked=true;
document.getElementById('initialValueOK').checked = (registry.byId('automated').getValue() == 'Automated Test - all check boxes should be checked');
registry.byId('automated').document.execCommand('selectall', false, false);
document.getElementById('onChangeOKnow').checked=true;
registry.byId('automated').document.execCommand('underline', false, false);
setTimeout(lang.hitch(registry.byId('editor0'),"focus",0));
}
</script
><script type='dojo/method' data-dojo-event='onBlur'>
if(!document.getElementById('onBlurFired').checked){
document.getElementById('onBlurFired').checked=true;
registry.byId('automated').set('disabled', true);
setTimeout(function(){ try {
registry.byId('automated').document.execCommand('bold', false, false);
document.getElementById('disabledOK').checked = (registry.byId('automated').document.queryCommandState('bold') == false);
}catch(e){ document.getElementById('disabledOK').checked = true; }}, 0);
}
</script
><script type='dojo/method' data-dojo-event='onChange'>
if(document.getElementById('onChangeOKnow').checked && !document.getElementById('onChangeFired').checked){
document.getElementById('onChangeFired').checked=true;
}
</script
></div>
<label for="onFocusFired">Focus:</label><input type="checkbox" id="onFocusFired" disabled />
<label for="initialValueOK">Value:</label><input type="checkbox" id="initialValueOK" disabled />
<input type="checkbox" id="onChangeOKnow" disabled style="display:none;"/>
<label for="onChangeFired">Change:</label><input type="checkbox" id="onChangeFired" disabled />
<label for="onBlurFired">Blur:</label><input type="checkbox" id="onBlurFired" disabled />
<label for="disabledOK">Disabled:</label><input type="checkbox" id="disabledOK" disabled />
<br>
<br>
<h1 class="testTitle">Editor + Plugins Test</h1>
<h2>No plugins, initially empty</h2>
<div data-dojo-type="dijit/Editor" data-dojo-props="plugins:[], height:'100', 'aria-label':'applied with aria'" id="editor0"></div>
<h2><label id="label_editor1">Created from div</label></h2>
<label for="focusBefore">lbl:</label><input id="focusBefore" value="input before editor1"/>
<div data-dojo-type="dijit/Editor" aria-labelledby="label_editor1" data-dojo-props="onChange:function(v){console.log('editor1 onChange handler: ' + v)}, disableSpellCheck:true" id="editor1"
><p>This instance is created from a div directly with default toolbar and plugins</p>
The following HTML should appear as source: <INPUT TYPE="IMAGE" SRC="javascript:alert('no scripting attacks')">
</div>
<label for="focusAfter">lbl:</label><input id="focusAfter" value="input after editor1"/>
<button onClick="registry.byId('editor1').destroy()">destroy</button>
<button onClick="registry.byId('editor1').set('disableSpellCheck', !registry.byId('editor1').get('disableSpellCheck'))">toggle spell check</button>
<button onclick="console.log(registry.byId('editor1').get('value'))">getValue</button>
<hr/>
<h2>Created from div, auto-expanding</h2>
<h3><label id="label_thud">label for editor:</label></h3>
<div data-dojo-type="dijit/Editor"
data-dojo-props="onChange:function(v){console.log('thud onChange handler: ' + v)}, extraPlugins:['dijit/_editor/plugins/AlwaysShowToolbar'], styleSheets:'../../themes/claro/document.css', minHeight:'75px', height:''"
id="thud" aria-labelledby="label_thud">
Extra text
<p>
This editor is created from a div with AlwaysShowToolbar plugin (do not forget to set height="").
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
risus.
</p>
The following HTML should appear as source: <INPUT TYPE="IMAGE" SRC="javascript:alert('no scripting attacks')">
</div>
<h3>..after</h3>
<hr/>
<h2>Optional toolbar buttons</h2>
<h3><label id="label_blah">blah entry</label></h3>
<div data-dojo-type="dijit/Editor"
data-dojo-props="plugins:['bold','italic','|','createLink','foreColor','hiliteColor',{name:'dijit/_editor/plugins/FontChoice', command:'fontName', generic:true},'fontSize','formatBlock','insertImage','insertHorizontalRule'], styleSheets:'../../themes/claro/document.css'"
id="blah" aria-labelledby="label_blah">
This instance includes optional toolbar buttons which pull in additional ui (dijit) code.
Note the require() arguments to pull in the associated editor plugins to make
this work.
<br>
<span style="font-family: serif">This is serif.</span>
<br>
<span style="font-family: sans-serif">This is sans-serif.</span>
<br>
<span style="font-family: monospace">This is monospace.</span>
<br>
<span style="font-family: cursive">This is cursive.</span>
<br>
<span style="font-family: fantasy">This is fantasy.</span>
<br>
</div>
<h3>..after</h3>
<button onclick="alert(registry.byId('blah').get('value'));">getValue</button>
<hr/>
<h2>Plugins specified</h2>
<h3><label id="label_blah2">Another blah entry</label></h3>
<div data-dojo-type="dijit/Editor" aria-labelledby="label_blah2"
data-dojo-props="plugins:['bold','italic','|',{name:'dijit/_editor/plugins/FontChoice', command:'fontName', custom:['Verdana','Myriad','Garamond','Apple Chancery','Hiragino Mincho Pro']}, {name:'dijit/_editor/plugins/FontChoice', command:'fontSize', custom:[3,4,5]}, {name:'dijit/_editor/plugins/EnterKeyHandling', blockNodeForEnter:'DIV'}], styleSheets:'../../themes/claro/document.css'"
id="blah2">
This instance demos how to:
<ol>
<li>specify which plugins to load (see the plugins property): this instance loads FontChoice plugin, among others;</li>
<li>specify options for a plugin (see the last item in the plugins array)</li>
</ol>
</div>
<h3>..after</h3>
<hr/>
<h2>Font sizing via style</h2>
<div data-dojo-type="dijit/Editor" data-dojo-props="style:'text-align:left; font-size:30pt'" aria-label="fontSizedEditor" id="fontSizedEditor">
Hello World!
</div>
<h2>Checking pre-filter application</h2>
<div data-dojo-type="dijit/Editor" data-dojo-props="extraPlugins:[{name: 'TestFilter'}]" aria-label="filteredEditor" id="filteredEditor">
notdojo
</div>
<h2>Checking editor starting with br</h2>
<div data-dojo-type="dijit/Editor" id="brEditor" aria-label="brEditor">
<br>
some stuff
<br>
some other stuff.
</div>
<h2>Programmatic creation</h2>
<div id="programmatic">This div will become an editor.</div>
<button
id="create"
onclick="new Editor({}, dom.byId('programmatic')); query('#create').orphan();">
create static editor
</button>
<div id="programmatic2">This div will become an auto-expanding editor.</div>
<button
id="create2"
onclick="new Editor({height: '', extraPlugins: ['dijit/_editor/plugins/AlwaysShowToolbar']}, dom.byId('programmatic2')); query('#create2').orphan();">
create expanding editor
</button>
<br><br>
<div id="programmatic3">This div will become a programmatic editor in addOnLoad with creation-defined default content.</div>
<br><br>
<div id="programmatic4">This div will become a programmatic editor in addOnLoad with creation-defined and custom filters.</div>
</body>
</html>