You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
6.8 KiB
184 lines
6.8 KiB
<!DOCTYPE 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/registry", |
|
"dijit/Editor", |
|
"dijit/_editor/plugins/ViewSource", |
|
"dijit/_editor/plugins/FullScreen", |
|
"dojo/domReady!" |
|
], function(parser, registry){ |
|
parser.parse(); |
|
|
|
var editor = registry.byId("editor7"); |
|
editor.set("value", "<h1>ViewSource Plugin with onmouseover in content set via setValue.</h1>" + |
|
"<p onmouseover=\"alert('Mouse over foobar');\">foobar</p>" + |
|
"<h2>Things to test:</h2>\n" + |
|
"<ol>" + |
|
"<li>Move mouse over \"foobar\" and make sure alert is not displayed.</li>" + |
|
"</ol>"); |
|
}); |
|
</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> |
|
<div id="editor6" 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 onmouseover in content.</h1> |
|
<p onmouseover="alert('Mouse over foobar');">foobar</p> |
|
|
|
<h2>Things to test:</h2> |
|
<ol> |
|
<li>Move mouse over "foobar" and make sure alert is not displayed.</li> |
|
</ol> |
|
</div> |
|
</div> |
|
<br> |
|
<br> |
|
<div> |
|
<div id="editor7" data-dojo-type="dijit/Editor" |
|
data-dojo-props='"aria-label":"editor3",extraPlugins:["fullScreen", "viewSource"], |
|
style:"background-color: white; width: 800px;", height:"300px" '> |
|
</div> |
|
</div> |
|
<br> |
|
<br> |
|
<div>Content after the editors.</div> |
|
</body> |
|
</html>
|
|
|