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.
130 lines (121 loc) • 3.7 kB
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>