mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 04:06:51 +00:00
48 lines
2 KiB
HTML
48 lines
2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
<script src="../../modules/rangy/rangy-core.js"></script>
|
|
<script>
|
|
$(function() {
|
|
// Don't allow dragging of any elements
|
|
$('#editor').on('dragover drop', function( e ) {
|
|
e.preventDefault();
|
|
} );
|
|
|
|
// When a table is clicked, put move the cursor
|
|
$('#editor table').on('mouseup', function(e) {
|
|
if (e.target.nodeName.toLowerCase() == 'table') {
|
|
moveCursor();
|
|
}
|
|
});
|
|
|
|
// Prevent resizing of tables. Works for all IE.
|
|
document.getElementsByTagName('table')[0].onresizestart = function(e) {
|
|
return false;
|
|
}
|
|
});
|
|
function moveCursor() {
|
|
console.log('moving cursor');
|
|
sel = rangy.getSelection();
|
|
range = rangy.createRange();
|
|
range.setStart( $('#editor td:first')[0], 0 );
|
|
range.setEnd( $('#editor td:first')[0], 0 );
|
|
sel.setSingleRange( range );
|
|
}
|
|
</script>
|
|
<style>
|
|
#editor table, #editor td {
|
|
border: 1px solid #CCC;
|
|
}
|
|
#editor table {
|
|
// Works for IE 9 and lower
|
|
// -ms-behavior: url(noresize.htc);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="editor" contenteditable="true"><p class="ce-leafNode es-paragraphView es-viewBranchNode-firstChild">In <span class="es-contentView-format-link" data-title="wiki/Computer_science">computer science</span>, <b>direct <i>manipulation</i></b><i></i> is a <span class="es-contentView-format-link" data-title="wiki/Human-computer interaction">human-computer interaction</span> style which involves continuous representation of objects of interest, and rapid, reversible, incremental actions and feedback. The intention is to allow a user to directly manipulate objects presented to them, using actions that correspond at least loosely to the physical world. An example of direct-manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.</p><table><tr><td>cell 1</td><td>cell 2</td></tr><tr><td>cell 3</td><td>cell 4</td></tr></table></div>
|
|
</body>
|
|
</html>
|