Insert an iframe into your page and specify its size. It will determine the dimensions of the editor. Load the editor.html file into this frame and define an id that helps to refer to it later. The size of the iframe should be set in exact units (for example, pixels): the minimum value is *500px 450px**. It is recommended to set its overflow property to hidden and to set a solid border to the iframe element.
<iframe id="sketch" src="../editor.html"
style="overflow: hidden; min-width: 500px; min-height: 450px; border: 1px solid darkgray;" />If you need default web services but you do not wish setup each one, you can use alternative version of editor.html: editorws.html.
It presets default web services at startup.
<iframe id="sketch" src="../editorws.html"
style="overflow: hidden; min-width: 500px; min-height: 450px; border: 1px solid darkgray;" />Please, note that web services have to be available at the default location that webservices.js defines. You can modify the default location in this file by overwriting these settings. editorws.html refers to this external JavaScript file when it retrieves the default web service config. If you link this file into your code, you can also refer to it by the getDefaultServices() function.
There is no guarantee that the editor is already alive when the loading of the parent page (where its iframe is inserted) has been finished. Because of this, getting the reference to the editor is not trivial. We provide a helper API to access it. Below, we demonstrate how to use this helper API or how you can access the sketcher without it.
Embed with the Helper API Embed without the Helper API
The marvinjslauncher.js JavaScript library provides an interface to control the event when the editor is loaded and helps to get a reference to the editor to be able to refer to the editor API.
To import it, insert the following lines into header of your web page (promise-1.0.0.min.js is a dependency of marvinjslauncher.js):
<script src="gui/lib/promise-1.0.0.min.js"></script>
<script src="js/marvinjslauncher.js"></script>The marvinjslauncher.js loads the MarvinJSUtil object its functions are described below. This API operates with Promise objects. Although, modern browsers have built-in Promise implementation, it may be lacking in older browsers.
The promise-1.0.0.min.js provides the necessary Promise implementation.
Returns a dynamically generated Promise object to observer when the sketcher in the given iframe has been successfully loaded or failed.
A Promise object to access the reference to the loaded sketcher object or get a notification if loading of the sketcher failed.
Call the then(onFullfiled, onRejected) function of the Promise returned by MarvinJSUtil.getEditor(iframeid) to be able to store the reference to the sketcher.
var marvinSketcherInstance;
MarvinJSUtil.getEditor("/display/docs/marvin-js_how-to-embed.md#sketch").then(function(sketcherInstance) {
marvinSketcherInstance = sketcherInstance;
}, function(error) {
alert("Loading of the sketcher failed"+error);
});Returns a dynamically generated Promise object to observer when the Marvin JS package is ready to be used in the given iframe.
A Promise object to access the reference to the object that wraps the Marvin JS API in the given iframe or gets a notification if any error occurs during its loading.
Call the then(onFullfiled, onRejected) function of the promise returned by MarvinJSUtil.getEditor(iframeid) to be able to store the reference to the sketcher.
var marvin;
MarvinJSUtil.getPackage("/display/docs/marvin-js_how-to-embed.md#sketch").then(function(marvinPackage) {
marvin = marvinPackage;
}, function(error) {
alert("Marvin package is not available:" +error);
});If you do not use the helper API, accessing the sketcher is more complicated, see the code below.
var marvinSketch;
document.getElementById("sketch").addEventListener("load", function () { // listen when the document in the iframe is loaded
var eframeWin = document.getElementById("sketch").contentWindow;
if (typeof eframeWin != 'undefined') { // if the contentWindow property of iframe is available, you can access inner content
try {
var marvin = eframeWin.marvin; // reference to marvin library in the iframe
if (marvin != null) {
marvin.onReady(function () { // onReady is performed when loading of the marvin API is ready (hopefully, sketcher is already instantiated)
// an editor instance is created automatically in the iframe
if (typeof marvin.sketcherInstance != 'undefined') { // undefined if you have no right to access it or instantiation failed
marvinSketch = marvin.sketcherInstance;
marvinSketch.importAsMrv(s);
}
});
}
} catch (e) {
alert(e);
}
}
});