Page MenuHomeWickedGov Phorge
Files F5985684

tinyve.html
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

tinyve.html
View Options

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinyVE</title>
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/oojs/oojs.js"></script>
<script src="../lib/oojs-ui/oojs-ui-core.js"></script>
<script src="tinyve.js"></script>
<script src="tinyve.dm.converter.js"></script>
<script src="tinyve.dm.Node.js"></script>
<script src="tinyve.dm.BranchNode.js"></script>
<script src="tinyve.dm.ContentBranchNode.js"></script>
<script src="tinyve.dm.Transaction.js"></script>
<script src="tinyve.dm.Document.js"></script>
<script src="tinyve.dm.Surface.js"></script>
<script src="tinyve.ce.Node.js"></script>
<script src="tinyve.ce.BranchNode.js"></script>
<script src="tinyve.ce.ContentBranchNode.js"></script>
<script src="tinyve.ce.Document.js"></script>
<script src="tinyve.ce.Surface.js"></script>
<script src="tinyve.ce.SurfaceObserver.js"></script>
<script src="tinyve.ui.Surface.js"></script>
<style>.tinyve-demo { height: 10em; border: solid gray 1px }</style>
</head>
<body>
<h1>TinyVE</h1>
<p>This is a toy demo of VisualEditor concepts, for use as an introduction to the VE codebase.</p>
<div class="tinyve-demo">
<ul>
<li>
<p>This is a <b>test</b> of <a href="http://example.com/tinyve">TinyVE</a>.</p>
</li>
<li>
<p>Try editing the content within a paragraph.</p>
</li>
<li>
<p>Editing outside paragraphs does not work correctly.</p>
</li>
</ul>
</div>
</body>
<script>
const $container = $( '.tinyve-demo' );
const html = $container.html();
tinyve.init( $container, html );
const dmDoc = tinyve.init.target.surface.model.documentModel;
console.log( 'Original:', dmDoc.data );
const tx1 = new tinyve.dm.Transaction( [
{ type: 'retain', length: 3 },
{
type: 'replace',
remove: [ ...'This' ],
insert: [ ...'THIS' ]
}
] );
dmDoc.commit( tx1 );
console.log( 'After tx1:', dmDoc.data );
const tx2 = new tinyve.dm.Transaction( [
{ type: 'retain', length: 2 },
{
type: 'replace',
remove: [],
insert: [ { type: 'p' }, ...'foo', { type: '/p' } ]
}
] );
dmDoc.commit( tx2 );
console.log( 'After tx2:', dmDoc.data );
</script>
</html>

File Metadata

Mime Type
text/html
Expires
Sat, Oct 3, 23:52 (2 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
5f/e6/0d06d2d27e2f93ba1ff577ace3ca
Default Alt Text
tinyve.html (2 KB)

Event Timeline