HTML Tags
ChemWriter components are deployed unobtrusively using standard HTML5 markup. After page load, host elements are identified and replaced with dynamically-generated DOM elements defining the appropriate Editor and Image components.
<script> Element
ChemWriter is packaged as a single JavaScript file deployed by nesting a script element within a document's <head> element.
<script src="/path/to/chemwriter.js"
data-chemwriter-license="/path/to/license.txt">
</script>
Although not required for development and testing purposes, the data‑chemwriter‑license attribute identifies the path of the license file to be used during production deployment.
<link> Element
The standard ChemWriter components, Editor and Image, can be styled with stylesheets. The required base CSS file is loaded with a link element embedded within a document's head element.
<link rel="stylesheet" href="/path/to/chemwriter.css">
Custom Attributes
Editor and Image are deployed by nesting a <div> element containing the appropriate data-chemwriter- attribute within the document body.
<!-- Editor -->
<div data-chemwriter-ui="editor"></div>
<!-- Image -->
<div data-chemwriter-ui="image"></div>
These attributes include:
data-chemwriter-ui(required) The name of the user interface ("editor" or "image") to be applied to an instantiated component.data-chemwriter-width(optional) The width of the component in pixels. If absent, the resulting component's width will be set to 100% of the enclosing element's width.data-chemwriter-height(optional) The height of the componet in pixels. If absent, the resulting component's height will be set to 100% of the enclosing element's height.data-chemwriter-src(optional) A URL from which to load a supported chemical structure file. Errors in loading this file can be viewed in the browser debug console.data-chemwriter-data(optional) A valid V2000 Molfile in which line breaks have been replaced by the\nliteral sequence.
In addition to these data-chemwriter- attributes, ChemWriter uses the id attribute of its host element. During execution of page scripts, a reference to the instantiated component can be obtained through the global chemwriter.components object.
<div id="my-editor" data-chemwriter-ui="editor"><div>
<script>
let editor = chemwriter.components['my-editor'];
</script>
Example Deployment of Editor and Image
To deploy a 620x350 pixel Editor depicting a molfile loaded inline:
<div id="editor"
data-chemwriter-width="620"
data-chemwriter-height="350"
data-chemwriter-data="\n CWRITER307031309392D \nCreated with ChemWriter - http://chemwriter.com\n 16 16 0 0 1 0 0 0 0 0999 V2000\n 53.8419 -44.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 62.5022 -49.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 71.1624 -44.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 71.1624 -34.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 62.5022 -29.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 53.8419 -34.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 45.1817 -29.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 45.1817 -49.7648 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 36.5214 -24.7648 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 79.8227 -29.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 88.4829 -34.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 97.1432 -29.7648 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 79.8227 -19.7648 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 105.8034 -34.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 114.4637 -29.7649 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 105.8034 -44.7648 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0\n 2 3 1 0 0 0\n 3 4 2 0 0 0\n 4 5 1 0 0 0\n 5 6 2 0 0 0\n 6 1 1 0 0 0\n 6 7 1 0 0 0\n 1 8 1 0 0 0\n 7 9 3 0 0 0\n 4 10 1 0 0 0\n 10 11 1 0 0 0\n 11 12 1 0 0 0\n 10 13 1 6 0 0 0\n 12 14 1 0 0 0\n 14 15 1 0 0 0\n 14 16 1 0 0 0\nM END">
</div>
To deploy an Image with bounds set by the surrounding element and depicting a molfile loaded asynchronously from a URL:
<div style="width: 150px; height: 150px;">
<div data-chemwriter-ui="image"
data-chemwriter-src="/images/image-1.mol">
</div>
</div>