tinymce-image-map/src/app/utils/template.html

TinyMCE plugin that generates image map for HTML content

<div id="img-map-canvas-container">
  <canvas id="img-map-canvas">
    Please upgrade your browser to display this image.
  </canvas>
</div>
<div id="img-map-actions">
  <span class="img-map-selection">
    <span class="img-map-shape-select">
      <input type="radio" name="shapeSelect" id="shape1" value="circle" />
      <label for="shape1">Circle</label>
    </span>
    <span class="img-map-shape-select">
      <input type="radio" name="shapeSelect" id="shape2" value="rectangle" />
      <label for="shape2">Rectangle</label>
    </span>
    <span class="img-map-shape-select">
      <input type="radio" name="shapeSelect" id="shape3" value="polygon" />
      <label for="shape3">Polygon</label>
    </span>
  </span>
  <span class="img-map-buttons">
    <button type="button" class="img-map-btn" onclick="tinymceImageMap.clearCanvas(true)">Clear</button>
    <button type="button" class="img-map-btn" onclick="tinymceImageMap.deleteMap()">Delete Focused</button>
  </span>
</div>
<form id="img-map-form">
  <label for="url">URL: </label>
  <input
    type="text"
    id="map-url-input"
    name="map-url-input"
    class="img-map-url-input"
    placeholder="https://www.validurl.com"
  />
</form>
<div id="img-map-hint">Hold Shift and left click to finish drawing the polygon</div>