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
153 lines (146 loc) • 5.87 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Editor Test: ViewSource Plugin</title>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"dojo/parser",
"dijit/Editor",
"dijit/_editor/plugins/ViewSource",
"dijit/_editor/plugins/FullScreen",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body class="claro" role="main">
<br>
<br>
<div>Content before the editors.</div>
<br>
<br>
<div>
<div id="editor0" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor0",extraPlugins:["viewSource"], style:"background-color: white; width: 800px;", height:"400px" '>
<h1>ViewSource Plugin details</h1>
<ol>
<li>The ViewSource plugin provides an extra button on the toolbar to allow switching the
editor from WSYIWYG editing to into HTML source mode editing in the browser.
This plugin is particularly useful when needing to tweak generated HTML source.</li>
<li>The mode can also be toggled by entering the key command: CTRL-SHIFT-F12
in the editor pane.</li>
<li>When it toggled it makes the edit area either a textarea if editing is enabled, or a readonly TEXTAREA node
if it is not editable.</li>
<li>The plugin is aware of the FullScreen plugin, and when present will make sure that FullScreen knows which
node to make 'full'.</li>
<li>The View Source adds in basic comment and script tag stripping by default (to help avoid XSS) attacks in code.
These can be disabled, but it is not recommended.</li>
<li>While in view source mode, all other menu bar plugins are disabled.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that clicking the View Source icon highlights the button appropriately and toggles the view source mode on.</li>
<li>Verify that clicking the View Source icon again dehighlites the button and toggles the view source mode off.</li>
<li>Click in the editing pane and verify that CTRL-SHIFT-F12 toggles the view source mode on and off.</li>
<li>Verify that when in View Source mode and comment and script tag stripping is enabled, that both inputs are removed when
toggled off.</li>
</ol>
</div>
</div>
<br>
<br>
<div>
<div id="editor1" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor1",extraPlugins:["fullScreen","viewSource"], style:"background-color: white; width: 800px;", height:"300px" '>
<h1>ViewSource Plugin with FullScreen Plugin details</h1>
<ol>
<li>The ViewSource plugin is FullScreen aware. It will should work appropriately when in full screen mode.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that while in Full Screen mode clicking the View Source icon highlights the button appropriately and toggles the
view source mode on and scales appropriately.</li>
</ol>
</div>
</div>
<br>
<br>
<div>
<div id="editor2" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor2",extraPlugins:["fullScreen",{name: "viewSource", readOnly: true}], style:"background-color: white; width: 800px;", height:"300px" '>
<h1>ViewSource Plugin with readOnly enabled details</h1>
<ol>
<li>The ViewSource plugin supports a readonly mode. This should display the content but not allow any edits..</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that while in View Source mode, the source cannot be edited.</li>
</ol>
</div>
</div>
<br>
<br>
<div>
<div id="editor3" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor3",extraPlugins:["fullScreen",{name: "viewSource", stripScripts: false, stripComments: false, stripIFrames: false}],
style:"background-color: white; width: 800px;", height:"300px" '>
<h1>ViewSource Plugin with script* disabled</h1>
<ol>
<li>The ViewSource plugin supports disabling the script stripping, comment stripping, etc. This can be dangerous, but sometimes it is desirable.</li>
</ol>
<h2>Things to test:</h2>
<ol>
<li>Verify that typed in script tags, comments, and iframes are left in the content when view switched.</li>
</ol>
</div>
</div>
<br>
<br>
<div>
<div id="editor4" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor3",extraPlugins:["fullScreen", "viewSource"],
style:"background-color: white; width: 800px;", height:"300px" '>
<h1>ViewSource Plugin with stripEventHandlers enabled</h1>
<img ondrag="alert('Bug dragged!')" src="./bug.png" onclick="alert('Bug clicked!');">
<button
onclick="alert('Button clicked!')"
id="button1"
ondblclick="alert('Button double clicked!')">
onclick button
</button>
<button name="button" id="button2">Just a button</button>
<h2>Things to test:</h2>
<ol>
<li>Click the view source button and verify that all on* attributes have been removed.</li>
</ol>
</div>
</div>
<br>
<br>
<div>
<div id="editor5" data-dojo-type="dijit/Editor"
data-dojo-props='"aria-label":"editor3",extraPlugins:["fullScreen", {name: "viewSource", stripEventHandlers: false}],
style:"background-color: white; width: 800px;", height:"300px" '>
<h1>ViewSource Plugin with stripEventHandlers disabled</h1>
<img ondrag="alert('Bug dragged!')" src="./bug.png" onclick="alert('Bug clicked!');">
<button
onclick="alert('Button clicked!')"
id="button3"
ondblclick="alert('Button double clicked!')">
onclick button
</button>
<button name="button" id="button4">Just a button</button>
<h2>Things to test:</h2>
<ol>
<li>Click the view source button and verify that all on* attributes have NOT been removed.</li>
</ol>
</div>
</div>
<br>
<br>
<div>Content after the editors.</div>
</body>
</html>