Files
Mergely/examples/simple.html
2022-01-01 16:37:42 +00:00

50 lines
1.6 KiB
HTML

<!--
This example demonstrates the minimum amount of code required to use Mergely.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /><title>Mergely - Simple Example</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Jamie Peabody" />
<!-- CodeMirror peer dependency -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css" />
<!-- Mergely -->
<script type="text/javascript" src="/lib/mergely.js"></script>
<link type="text/css" rel="stylesheet" href="/lib/mergely.css" />
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState !== 'complete') {
return;
}
const doc = new Mergely('#mergely', {
license: 'lgpl',
ignorews: true,
wrap_lines: true,
change_timout: 0,
rhs: (setValue) => {
// async, on init
setValue('the quick brown fox\njumped over the lazy dog');
}
});
doc.lhs('the quick red fox\njumped over the hairy dog');
};
</script>
</head>
<body>
<div class="mergely-full-screen-8">
<div class="mergely-resizer">
<div id="mergely" />
</div>
</div>
</body>
</html>