To be able to embed the Marvin JS editor into a web page, you need one of the following HTML files:
These HTML files are responsible for loading all resources that the editor component requires.
First of all, create an iframe that loads the proper HTML file.
(In this example, the editorws.html file is preferred to be able to use extra functionalities that webservices provide.)
The editor component fills the iframe. As you resize the iframe, the editor follows the changing of the
iframe width and height. In this example, the iframe size is determined by its CSS class,
which is defined in docs.css: sketcher-frame
<div class="resizable">
<iframe src="../editorws.html" id="sketch" class="sketcher-frame"></iframe>
</div>
The host page is where the iframe is inserted.
The loading of the editor is not synchronized with the loading of the hosted page. The sketcher object is instantiated inside the iframe. Thus, there is no guaranty that the sketcher is already available
when the loading of the hosted page is finished.
If you would like to access the sketcher object, use the MarvinJSUtil.getEditor(iframeID) helper function from the js/marvinjslauncher.js.
To use it, please include the following script in the header of the HTML document where you would like to use.
<script src="../gui/lib/promise-1.0.0.min.js"></script>
<script src="../js/marvinjslauncher.js"></script>Below, you can see its usage.
Call MarvinJSUtil.getEditor with the ID of the iframe that contains the editor. It returns with a promise.
After then, call the then method of the promise object. Here, you can specify which code should be evaluated when loading of the sketcher is successful and which one when it fails.
MarvinJSUtil.getEditor("#sketch").then(function(sketcherInstance) {
// code performed when the sketcher loaded successful (sketcherInstance is a reference to the editor object)
}, function() {
// code performed when the sketcher loading failed
});The fail branch can be evaluated in the following cases:
Please, take care that in certain case the browser can reject accessing of the sketcher despite it is loaded into the iframe. It happens when the JavaScript request violates the security concept of the browser (same origin policy).
See the Troubleshoot section of the documentation for more details.In this example, when sketcher is loaded, the initial molecule is setup by calling the importStructure function, and the initControls() function is performed. It binds even handlers
for the checkboxes above the editor (CPK coloring and Carbon label visibility).
var marvinSketcherInstance;
$(document).ready(function handleDocumentReady (e) {
var p = MarvinJSUtil.getEditor("#sketch");
p.then(function (sketcherInstance) {
marvinSketcherInstance = sketcherInstance;
marvinSketcherInstance.importStructure("mol", s).catch(function(error) {
alert(error);
});
initControls();
}, function (error) {
alert("Cannot retrieve sketcher instance from iframe:"+error);
});
});
function initControls () {
// Reset mol button
$("#btn-setmol").on("click", function (e) {
marvinSketcherInstance.importStructure("mol", s);
});
}
var s = "\n\n\n"+
" 14 15 0 0 0 0 0 0 0 0999 V2000\n"+
" 0.5089 7.8316 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 1.2234 6.5941 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 1.2234 7.4191 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.2055 6.5941 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.9200 7.8316 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 0.5089 5.3566 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.2055 7.4191 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 0.5089 6.1816 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" -0.9200 6.1816 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 0.5089 8.6566 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.4929 7.0066 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.0080 7.6740 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.0080 6.3391 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 2.2630 8.4586 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n"+
" 1 7 1 0 0 0 0\n"+
" 8 2 1 0 0 0 0\n"+
" 1 3 1 0 0 0 0\n"+
" 2 3 2 0 0 0 0\n"+
" 7 4 1 0 0 0 0\n"+
" 4 8 1 0 0 0 0\n"+
" 4 9 2 0 0 0 0\n"+
" 7 5 1 0 0 0 0\n"+
" 8 6 1 0 0 0 0\n"+
" 1 10 2 0 0 0 0\n"+
" 3 12 1 0 0 0 0\n"+
" 2 13 1 0 0 0 0\n"+
" 13 11 2 0 0 0 0\n"+
" 12 11 1 0 0 0 0\n"+
" 12 14 1 0 0 0 0\n"+
"M END\n";