tinymce-image-map
Version:
TinyMCE plugin that generates image map for HTML content
48 lines (44 loc) • 1.36 kB
HTML
<html>
<head>
<script src="//cdn.tinymce.com/4/tinymce.js"></script>
<script>
tinymce.init({
selector: 'textarea#editable',
plugins: 'imageMap code link autoresize contextmenu',
toolbar: 'imageMap code link',
contextmenu: "imageMap bold link",
width: 1000,
autoresize_bottom_margin: 50,
autoresize_max_height: 900
});
//Initial content
const initialHTML = `
<div>
<p>Testing <a href="https://www.bing.com" data-mce-selected="inline-boundary">imageMap</a></p>
<img src="static/assets/bulbs.jpeg" height="400" width="600" useMap="#testmap">
<map name="testmap">
<area shape="circle" href="https://www.google.com" coords="50,50,45" target="_blank"/>
<area shape="rect" href="https://www.nytimes.com" coords="416,297,584,373" target="_blank"/>
<area shape="polygon" href="https://news.ycombinator.com"
coords="113,171,116,236,90,299,120,325,342,323,374,278,348,165,242,167" target="_blank"/>
</map>
</div>
`;
window.onload = () => {
tinymce.activeEditor.setContent(initialHTML);
}
</script>
<style>
.container {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<textarea id="editable"></textarea>
</div>
</body>
</html>