Updated
This commit is contained in:
Éric Lemoine
216
master/examples/test_Editor.html
Normal file
216
master/examples/test_Editor.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Editor Test</title>
|
||||
|
||||
<style type="text/css">
|
||||
@import "../../themes/claro/document.css";
|
||||
@import "../css/dijitTests.css";
|
||||
</style>
|
||||
|
||||
<!-- required: a default dijit theme: -->
|
||||
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
||||
|
||||
<!-- required: dojo.js -->
|
||||
<script type="text/javascript" src="../../../dojo/dojo.js"
|
||||
data-dojo-config="isDebug: true"></script>
|
||||
|
||||
<!-- not needed, for testing alternate themes -->
|
||||
<script type="text/javascript" src="../_testCommon.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
||||
dojo.require("dijit.Editor");
|
||||
dojo.require("dijit._editor._Plugin");
|
||||
dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
|
||||
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
|
||||
|
||||
dojo.ready(function(){
|
||||
// Dummy simple plugin for testing that filters registered this way work
|
||||
// properly with content setting on load.
|
||||
dojo.declare("dijit.tests.editor.TestFilter", [dijit._editor._Plugin], {
|
||||
setEditor: function(editor){
|
||||
this.editor = editor;
|
||||
this.editor.contentPreFilters.push(function(val){
|
||||
if(val){
|
||||
val = val.replace("notdojo", "DOJO");
|
||||
}
|
||||
return val;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
dojo.parser.parse();
|
||||
|
||||
var progEditor = new dijit.Editor({
|
||||
value: "Custom Initial Content."
|
||||
}, "programmatic3");
|
||||
|
||||
var progEditor2 = new dijit.Editor({
|
||||
contentPreFilters: [function(txt){ return txt; }]
|
||||
}, "programmatic4");
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="claro">
|
||||
<div data-dojo-type="dijit.Editor" data-dojo-props="plugins:[], focusOnLoad:true, height:'1.5em', style:'border:0px;'" 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 = (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(dojo.hitch(dijit.byId('editor0'),"focus",0));
|
||||
}
|
||||
</script
|
||||
><script type='dojo/method' data-dojo-event='onBlur'>
|
||||
if(!document.getElementById('onBlurFired').checked){
|
||||
document.getElementById('onBlurFired').checked=true;
|
||||
dijit.byId('automated').set('disabled', 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' data-dojo-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 />
|
||||
Value:<input type="checkbox" id="initialValueOK" disabled />
|
||||
<input type="checkbox" id="onChangeOKnow" disabled style="display:none;"/>
|
||||
Change:<input type="checkbox" id="onChangeFired" disabled />
|
||||
Blur:<input type="checkbox" id="onBlurFired" disabled />
|
||||
Disabled:<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'" id="editor0"></div>
|
||||
|
||||
<h2>Created from div</h2>
|
||||
<input id="focusBefore" value="input before editor1"/>
|
||||
<div data-dojo-type="dijit.Editor" 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>
|
||||
<input id="focusAfter" value="input after editor1"/>
|
||||
<button onClick="dijit.byId('editor1').destroy()">destroy</button>
|
||||
<button onClick="dijit.byId('editor1').set('disableSpellCheck', !dijit.byId('editor1').get('disableSpellCheck'))">toggle spell check</button>
|
||||
<button onclick="console.log(dijit.byId('editor1').get('value'))">getValue</button>
|
||||
<button id="addStyleSheet" onclick="dijit.byId('editor1').addStyleSheet('test_editor.css')">add stylesheet</button>
|
||||
<button id="removeStyleSheet" onclick="dijit.byId('editor1').removeStyleSheet('test_editor.css')">remove stylesheet</button>
|
||||
<hr/>
|
||||
|
||||
<h2>Created from div, auto-expanding</h2>
|
||||
<h3><label>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">
|
||||
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>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">
|
||||
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>
|
||||
</div>
|
||||
<h3>..after</h3>
|
||||
<button onclick="alert(dijit.byId('blah').get('value'));">getValue</button>
|
||||
<hr/>
|
||||
|
||||
<h2>Plugins specified</h2>
|
||||
<h3><label>Another blah entry</label></h3>
|
||||
<div data-dojo-type="dijit.Editor"
|
||||
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'" id="fontSizedEditor">
|
||||
Hello World!
|
||||
</div>
|
||||
|
||||
<h2>Checking pre-filter application</h2>
|
||||
<div data-dojo-type="dijit.Editor" data-dojo-props="extraPlugins:[{name: 'dijit.tests.editor.TestFilter'}]" id="filteredEditor">
|
||||
notdojo
|
||||
</div>
|
||||
|
||||
<h2>Checking editor starting with br</h2>
|
||||
<div data-dojo-type="dijit.Editor" id="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 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>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user