vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2025-06-11 18:43:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Integrate editor as part of webapp.

Browse Source
This commit is contained in:
Matias Arriola
2022-01-25 18:10:40 +00:00
committed by Paulo Veiga
parent 2b40f429b4
commit 8b6ffe2d3c
147 changed files with 2175 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/editor/test/playground/map-render/html/container.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE HTML>
<html>
<head>
<title>WiseMapping - Embedded Sample </title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<style>
body {
font-family: Arial, Tahoma;
background: #a9a9a9;
padding: 10px 30px;
}
iframe {
border: 0;
}
#editor {
width: 100%;
text-align: center;
}
#code {
border: 1px dashed #f5f5dc;
padding: 10px;
background: #838383;
}
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div>
<div id="doc">
<h1>Embedded editor sample</h1>
<p>
This is a simple example of how WiseMapping can be embedded in a page.
Embedding WiseMapping editor is such simple as copying this line in your page:
</p>
<div id="code">&lt;iframe src="embedded.html?confUrl=html/container.json" width="800" height="600"&gt;&lt;/iframe&gt;</div>
<p>
The container.json file contains a set of properties that must be configured. Properties:
</p>
<ul>
<li>size: Must match with the size of the iframe</li>
<li>zoom: Scale to be applied to the map</li>
<li>readOnly: If the map could be modified.</li>
<li>persistenceManager: Persistence managers to be used. By default, local browser storage is used.</li>
<li>mapId: UUID of the map to be loaded.</li>
<li>container: div element where the mindmap will be embedded..</li>
</ul>
<p>
It's important to point out that embedded.html is a static html page that it's mean to be a template page
for advanced customization. In few words, go ahead and modify it.
</p>
</div>
<div id="editor">
<iframe src="embedded.html?confUrl=html/container.json" width="800" height="400"></iframe>
</div>
</div>
</body>
</html>