Listen for Edits
Responsive user interfaces can be enabled by listening to changes in editor state. The Editor #addEventListener function makes it possible to respond when the user changes the structure in the Editor window. Pass in the name of the event ("document-edited") and your function. Changes to the contents of the editor will trigger the execution of your function.
It's often convenient to configure listeners when a page loads, but only after ChemWriter finishes initialization. Use chemwriter.System.ready to add functions that will be run when ChemWriter is ready. For example, an alert can be displayed when the user edits a structure, as in the example below.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Listen for Edits | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js" data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt"></script>
<style>
.editor { max-width: 500px; height: 350px; }
</style>
</head>
<body>
<div class="editor">
<div id="editor" data-chemwriter-ui="editor"></div>
</div>
<script>
chemwriter.System.ready(() => {
let editor = chemwriter.components.editor;
editor.addEventListener('document-edited', (e) => {
alert('Document changed.');
});
});
</script>
</body>
</html>