dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
81 lines (79 loc) • 4.12 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Editor Test: BidiSupport Plugin</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/claro/claro.css";
@import "../../../dijit/themes/claro/document.css";
@import "../../../dijit/themes/claro/Editor.css";
@import "../plugins/resources/css/BidiSupport.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="parseOnLoad: false, async: true, isDebug: true"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/registry",
"dijit/Editor",
"dojox/editor/plugins/BidiSupport",
"dijit/_editor/plugins/FontChoice",
"dijit/_editor/plugins/ViewSource",
"dijit/_editor/plugins/EnterKeyHandling",
"dojox/editor/plugins/CollapsibleToolbar",
"dojo/domReady!"
], function(parser, registry){
parser.parse();
registry.byId("startEditor").focus();
});
</script>
</head>
<body class="claro">
<h2 align="center">Editor Test: BidiSupport plugin</h2>
<table width="100%">
<tr style="padding: 0 0 20px 0"><td style="padding: 0 10px">
<h3 style="text-align: center;">LTR Editor with bidi buttons</h3><br/>
<div style="border: 1px dotted black;">
<div data-dojo-type="dijit/Editor" id="startEditor"
data-dojo-props='plugins: ["bold","italic","|","justifyLeft","justifyCenter","justifyRight","|","formatBlock"],
extraPlugins: ["|","insertOrderedList","insertUnorderedList","|","indent","outdent","|", "bidiSupport", "|",
"dijit/_editor/plugins/ViewSource"], height: "230px", disableSpellCheck:true'>
Type some text here.<br/>Select lines and push RTL or LTR button to change their direction.<br/>Use shortcut Ctrl+9 to change their direction to opposite.
</div>
</div>
</td><td style="padding: 0 10px; width: 50%">
<h3 style="text-align: center;">RTL Editor with bidi buttons</h3><br/>
<div style="border: 1px dotted black;">
<div data-dojo-type="dijit/Editor" dir="rtl"
data-dojo-props='plugins: ["bold","italic","|","justifyRight","justifyCenter","justifyLeft","|","formatBlock"],
extraPlugins: ["|","insertOrderedList","insertUnorderedList","|","indent","outdent","|", "bidiSupport", "|",
"dijit/_editor/plugins/ViewSource"], height: "230px", disableSpellCheck:true'>
Type some text here.<br/>Select lines and push RTL or LTR button to change their direction.<br/>Use shortcut Ctrl+9 to change their direction to opposite.
</div>
</div></td></tr>
<tr><td style="padding: 0 10px">
<h3 style="text-align: center;">LTR Editor with collapsible toolbar, without bidi buttons</h3><br/>
<div style="border: 1px dotted black;">
<div data-dojo-type="dijit/Editor"
data-dojo-props='plugins: ["bold","italic","|","justifyLeft","justifyCenter","justifyRight","|","formatBlock"],
extraPlugins: ["|","insertOrderedList","insertUnorderedList","|","indent","outdent","|",
{name: "dojox/editor/plugins/BidiSupport", shortcutonly: true},"|",
"dijit/_editor/plugins/ViewSource", "collapsibletoolbar"], height: "230px", disableSpellCheck:true'>
Type some text here.<br/>Select lines and use the following shortcuts:<br/>Ctrl+8 to change their direction to LTR, Ctrl+0 - to RTL, Ctrl+9 - to opposite.
</div>
</div>
</td><td style="padding: 0 10px">
<h3 style="text-align: center;">LTR Editor with blockMode "P"</h3><br/>
<div style="border: 1px dotted black;">
<div data-dojo-type="dijit/Editor"
data-dojo-props='plugins: ["bold","italic","|","justifyLeft","justifyCenter","justifyRight","|","formatBlock", "dijit/_editor/plugins/EnterKeyHandling"],
extraPlugins: ["|","insertOrderedList","insertUnorderedList","|","indent","outdent","|",
{name: "dojox/editor/plugins/BidiSupport", blockMode: "P"}, "|",
"dijit/_editor/plugins/ViewSource"], height: "230px", disableSpellCheck:true'>
Type some text here.<br/>Select lines and push RTL or LTR button to change their direction.<br/>Use shortcut Ctrl+9 to change their direction to opposite.
</div>
</div></td></tr>
</table>
</body>
</html>