154 lines
6.7 KiB
HTML
154 lines
6.7 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Editor Test</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../dojo/resources/dojo.css";
|
||
|
|
@import "css/dijitTests.css";
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../dojo/dojo.js"
|
||
|
|
djConfig="parseOnLoad: true, isDebug: true"></script>
|
||
|
|
<script type="text/javascript" src="_testCommon.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dijit.Editor");
|
||
|
|
dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
|
||
|
|
dojo.require("dijit._editor.plugins.EnterKeyHandling");
|
||
|
|
dojo.require("dijit._editor.plugins.FontChoice"); // 'fontName','fontSize','formatBlock'
|
||
|
|
dojo.require("dijit._editor.plugins.TextColor");
|
||
|
|
dojo.require("dijit._editor.plugins.LinkDialog");
|
||
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div dojoType="dijit.Editor" id="automated" height="1.5em" plugins="[]" focusOnLoad="true" style="border:0px;"
|
||
|
|
>Automated Test - all check boxes should be checked<script type='dojo/method' event='onFocus'>
|
||
|
|
if(!document.getElementById('onFocusFired').checked){
|
||
|
|
document.getElementById('onFocusFired').checked=true;
|
||
|
|
document.getElementById('initialValueOK').checked = (dijit.byId('automated').getValue() == 'Automated Test - all check boxes should be checked');
|
||
|
|
dijit.byId('automated').document.execCommand('selectall', false, false);
|
||
|
|
document.getElementById('onChangeOKnow').checked=true;
|
||
|
|
dijit.byId('automated').document.execCommand('underline', false, false);
|
||
|
|
setTimeout(function(){dijit.byId('editor1').focus();}, 0);
|
||
|
|
}
|
||
|
|
</script
|
||
|
|
><script type='dojo/method' event='onBlur'>
|
||
|
|
if(!document.getElementById('onBlurFired').checked){
|
||
|
|
document.getElementById('onBlurFired').checked=true;
|
||
|
|
dijit.byId('automated').setDisabled(true);
|
||
|
|
setTimeout(function(){ try {
|
||
|
|
dijit.byId('automated').document.execCommand('bold', false, false);
|
||
|
|
document.getElementById('disabledOK').checked = (dijit.byId('automated').document.queryCommandState('bold') == false);
|
||
|
|
} catch(e) { document.getElementById('disabledOK').checked = true; }}, 0);
|
||
|
|
}
|
||
|
|
</script
|
||
|
|
><script type='dojo/method' event='onChange'>
|
||
|
|
if(document.getElementById('onChangeOKnow').checked && !document.getElementById('onChangeFired').checked){
|
||
|
|
document.getElementById('onChangeFired').checked=true;
|
||
|
|
}
|
||
|
|
</script
|
||
|
|
></div>
|
||
|
|
Focus:<input type="checkbox" id="onFocusFired" disabled autoComplete="off">
|
||
|
|
Value:<input type="checkbox" id="initialValueOK" disabled autoComplete="off">
|
||
|
|
<input type="checkbox" id="onChangeOKnow" disabled autoComplete="off" style="display:none;">
|
||
|
|
Change:<input type="checkbox" id="onChangeFired" disabled autoComplete="off">
|
||
|
|
Blur:<input type="checkbox" id="onBlurFired" disabled autoComplete="off">
|
||
|
|
Disabled:<input type="checkbox" id="disabledOK" disabled autoComplete="off">
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<h1 class="testTitle"><label for="editor1">Editor + Plugins Test</label></h1>
|
||
|
|
<h2>Created from div</h2>
|
||
|
|
<div style="border: 1px solid black;">
|
||
|
|
<div dojoType="dijit.Editor" id="editor1"
|
||
|
|
onChange="console.log('editor1 onChange handler: ' + arguments[0])"
|
||
|
|
><p>This instance is created from a div directly with default toolbar and plugins</p></div>
|
||
|
|
</div>
|
||
|
|
<button onClick="dijit.byId('editor1').destroy()">destroy</button>
|
||
|
|
<button onclick="console.log(dijit.byId('editor1').getValue().length)">getValue</button>
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<h2>Created from textarea,auto-expanding</h2>
|
||
|
|
<div style="border: 1px dotted black;">
|
||
|
|
<h3><label for="thud">thud - from textarea</label></h3>
|
||
|
|
<textarea dojoType="dijit.Editor" height=""
|
||
|
|
onChange="console.log('thud onChange handler: ' + arguments[0])"
|
||
|
|
extraPlugins="['dijit._editor.plugins.AlwaysShowToolbar']"
|
||
|
|
styleSheets="../../dojo/resources/dojo.css" id="thud">
|
||
|
|
<p>
|
||
|
|
This editor is created from a textarea 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>
|
||
|
|
</textarea>
|
||
|
|
<h3>..after</h3>
|
||
|
|
</div>
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<h2>Optional toolbar buttons</h2>
|
||
|
|
<div style="border: 1px dotted black;">
|
||
|
|
<h3><label for="blah">blah entry</label></h3>
|
||
|
|
<textarea dojoType="dijit.Editor"
|
||
|
|
plugins="['bold','italic','|','createLink','foreColor','hiliteColor',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true},'fontSize','formatBlock','insertImage']"
|
||
|
|
styleSheets="../../dojo/resources/dojo.css" id="blah">
|
||
|
|
This instance includes optional toolbar buttons which pull in additional ui (dijit) code.
|
||
|
|
Note the dojo.require() statements required 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>
|
||
|
|
</textarea>
|
||
|
|
<h3>..after</h3>
|
||
|
|
<button onclick="alert(dijit.byId('blah').getValue());">getValue</button>
|
||
|
|
</div>
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<h2>Plugins specified</h2>
|
||
|
|
<div style="border: 1px dotted black;">
|
||
|
|
<h3><label for="blah2">Another blah entry</label></h3>
|
||
|
|
<textarea dojoType="dijit.Editor"
|
||
|
|
plugins="['bold','italic','|',{name:'dijit._editor.plugins.EnterKeyHandling'},{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]}]"
|
||
|
|
styleSheets="../../dojo/resources/dojo.css" id="blah2">
|
||
|
|
This instance demos how to:
|
||
|
|
<ol>
|
||
|
|
<li>specify which plugins to load (see the plugins property): this instance loads EnterKeyHandling plugin, among others;</li>
|
||
|
|
<li>specify options for a plugin (see the last item in the plugins array)</li>
|
||
|
|
</ol>
|
||
|
|
</textarea>
|
||
|
|
<h3>..after</h3>
|
||
|
|
</div>
|
||
|
|
<hr/>
|
||
|
|
|
||
|
|
<h2>Programmatic creation</h2>
|
||
|
|
<div id="programmatic">This div will become an editor.</div>
|
||
|
|
<button
|
||
|
|
id="create"
|
||
|
|
onclick="new dijit.Editor({}, dojo.byId('programmatic')); dojo.query('#create').orphan();">
|
||
|
|
create static editor
|
||
|
|
</button>
|
||
|
|
<div id="programmatic2">This div will become an auto-expanding editor.</div>
|
||
|
|
<button
|
||
|
|
id="create2"
|
||
|
|
onclick="new dijit.Editor({height: '', extraPlugins: ['dijit._editor.plugins.AlwaysShowToolbar']}, dojo.byId('programmatic2')); dojo.query('#create2').orphan();">
|
||
|
|
create expanding editor
|
||
|
|
</button>
|
||
|
|
</body>
|
||
|
|
</html>
|