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.
129 lines
3.6 KiB
129 lines
3.6 KiB
<!DOCTYPE html> |
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
|
<title>Editor Table Plugins</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
@import "../../widget/ColorPicker/ColorPicker.css"; |
|
</style> |
|
|
|
<link href="../plugins/resources/editorPlugins.css" type="text/css" rel="stylesheet" /> |
|
|
|
<script type="text/javascript"> |
|
var dojoConfig = { |
|
async: true, |
|
isDebug: true, |
|
popup:true |
|
//forceFirebugLite:true |
|
}; |
|
</script> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script> |
|
|
|
<!-- only needed for alternate theme testing: --> |
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|
|
|
<script> |
|
require([ |
|
"dojo/_base/kernel", |
|
"dojo/on", |
|
"dojo/parser", |
|
"dijit/registry", |
|
"dijit/Editor", |
|
"dijit/form/Button", |
|
"dojox/editor/plugins/TablePlugins", |
|
"dijit/_editor/plugins/ViewSource", |
|
"dojo/domReady" |
|
], function(kernel, on, parser, registry) { |
|
console.log(kernel.version.toString()); |
|
|
|
parser.parse(); |
|
|
|
var editor = registry.byId("editor"); |
|
var button = registry.byId("removeButton"); |
|
var c = on(button, "click", function(){ |
|
c.remove(); |
|
editor.close(); |
|
editor.destroy(); |
|
}); |
|
}); |
|
</script> |
|
<style> |
|
#main{ |
|
width:auto; |
|
margin:20px 100px; |
|
} |
|
</style> |
|
</head> |
|
<body class="claro"> |
|
<div id="main"> |
|
<div id="editor" data-dojo-type="dijit/Editor" |
|
data-dojo-props="height: '200px', plugins: [ |
|
'undo', 'redo', 'bold','italic','|', |
|
{name: 'insertTable'}, |
|
{name: 'modifyTable'}, |
|
{name: 'insertTableRowBefore'}, |
|
{name: 'insertTableRowAfter'}, |
|
{name: 'insertTableColumnBefore'}, |
|
{name: 'insertTableColumnAfter'}, |
|
{name: 'deleteTableRow'}, |
|
{name: 'deleteTableColumn'}, |
|
{name: 'colorTableCell'}, |
|
{name: 'tableContextMenu'} |
|
]"> |
|
Dojo Rocks with a fox in socks. Red socks. In a box. |
|
<br/><br/> |
|
<table width="200" border="2" cellpadding="2" cellspacing="2" id="myTable" |
|
style="border-color: #0ff; background-color: #f00"> |
|
<tr> |
|
<td> </td> |
|
<td> </td> |
|
<td> </td> |
|
</tr> |
|
<tr> |
|
<td> </td> |
|
<td id="myCell"> </td> |
|
<td> </td> |
|
</tr> |
|
<tr> |
|
<td> </td> |
|
<td> </td> |
|
<td bgcolor="#00FFFF">Text</td> |
|
</tr> |
|
</table> |
|
</div> |
|
</div> |
|
<button id="removeButton" data-dojo-type="dijit/form/Button">Remove Editor</button> |
|
<hr> |
|
<h2>Test Different Color Picker in modifyTable and colorTableCell</h2> |
|
<p>This test uses the dojox/widget/ColorPicker picker in modifyTable, which normally uses dijit/ColorPalette, and vice versa for colorTableCell.</p> |
|
<div id="editor2" data-dojo-type="dijit/Editor" style="height: 200px" |
|
data-dojo-props="plugins: [ 'undo', 'redo', 'bold','italic','|', |
|
{name: 'modifyTable', colorPicker: 'dojox/widget/ColorPicker'}, |
|
{name: 'colorTableCell', colorPicker: 'dijit/ColorPalette'}]"> |
|
Dojo Rocks with a fox in socks. Red socks. In a box. |
|
<br/><br/> |
|
<table width="200" border="2" cellpadding="2" id="myTable2" |
|
style="border-color: #0ff; background-color: #f00"> |
|
<tr> |
|
<td> </td> |
|
<td> </td> |
|
<td> </td> |
|
</tr> |
|
<tr> |
|
<td> </td> |
|
<td id="myCell2"> </td> |
|
<td> </td> |
|
</tr> |
|
<tr> |
|
<td> </td> |
|
<td> </td> |
|
<td bgcolor="#00FFFF">Text</td> |
|
</tr> |
|
</table> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|