Files
dist
lang
libraries
packages
core-js
editor
bootstrap
css
cypress
html
icons
images
js
src
test
playground
map-render
bootstrap
css
html
container.html
container.json
editor.html
embedded.html
viewmode.html
images
js
samples
index.html
.babelrc
.gitignore
cypress.json
package.json
tsconfig.json
webpack.common.js
webpack.playground.js
webpack.prod.js
yarn.lock
mindplot
web2d
webapp
.dockerignore
.gitignore
.nvmrc
.prettierignore
.prettierrc.json
CONTRIBUTING.md
README.md
bitbucket-pipelines.yml
docker-compose.snapshots.update.yml
docker-compose.snapshots.yml
lerna.json
package.json
webpack.common.js
yarn.lock
wisemapping-frontend/packages/editor/test/playground/map-render/html/container.html
Matias Arriola 8ccc4e798e Refactor editor init
Add inline images to editor footer
Move playground to editor
2022-01-24 17:22:39 -03:00

69 lines
2.1 KiB
HTML

<!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>