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
86 lines (76 loc) • 2.19 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"
data-dojo-config="parseOnLoad: false, has: {'dojo-bidi': true}">
</script>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojo/parser", // scan page for widgets and instantiate them
"dijit/Editor",
"dojo/domReady!"
], function(declare, parser, Editor){
parser.parse();
var editor1 = new Editor({
dir: 'ltr',
textDir: 'rtl',
height: '75px',
value: ''
}, "prog1");
editor1.startup();
var editor2 = new Editor({
dir: 'rtl',
textDir: 'ltr',
height: '75px',
value: ''
}, "prog2");
editor2.startup();
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Editor GUI orientation and default text direction Test</h1>
<h2 class="testTitle" style="text-align: center;">Created from div.</h2>
<table width='100%'>
<tr><td width='49%' dir='ltr'>
<div data-dojo-type="dijit/Editor"
data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px'"
id="ed1">
</div>
</td>
<td width='2%'></td>
<td dir='rtl'>
<div data-dojo-type="dijit/Editor"
data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px'"
id="ed2">
</div>
</td></tr>
<tr><td width='49%'>
<div data-dojo-type="dijit/Editor"
data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px', dir: 'ltr', textDir: 'rtl'"
id="ed3">
</div>
</td>
<td width='2%'></td>
<td>
<div data-dojo-type="dijit/Editor"
data-dojo-props="styleSheets:'../../themes/claro/document.css', height:'70px', dir: 'rtl', textDir: 'ltr'"
id="ed4">
</div>
</td></tr>
</table>
<h2 class="testTitle" style="text-align: center;">Programmatic creation.</h2>
<table width='100%'>
<tr><td width='49%'>
<div id="prog1">This div will become a programmatic editor in addOnLoad.</div>
</td>
<td width='2%'></td>
<td>
<div id="prog2">This div will become a programmatic editor in addOnLoad.</div>
</td></tr>
</table>
</body>
</html>