emiel/editor-demo-using-template.html

## editor-demo-using-template.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Template Test</title>
    <style>
      h1 { font-family: Georgia; }
      #editor { max-width: 600px; }
      .editable { background-color: #eeeeee; }
    </style>
  </head>

  <body>
    <h1>Editor Demo</h1>
    <p>Using HTML <a href="https://www.w3.org/TR/html5/scripting-1.html#the-template-element">template</a> element</p>
    <table id=editor>
      <tbody>
        <template id=text-block>
          <tr class="text-block">
            <td>
              <style scoped>
                h1, p {
                  font-family: serif;
                }
              </style>
              <div class="editable">
                <h1>Lorem Ipsum</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
                libero consequat, consectetur arcu at, luctus lacus. Curabitur neque mi,
                ultrices vel est nec, fermentum efficitur felis. Pellentesque ac erat
                quis mi iaculis semper quis et turpis. Maecenas facilisis felis vitae
                bibendum pulvinar. Mauris fermentum odio at commodo rhoncus. Mauris neque
                nunc, fringilla id dignissim eget, gravida nec tellus. Nulla eget
                venenatis felis, ut mattis nunc. Mauris eget mi et ipsum tincidunt
                suscipit nec nec urna. Fusce eu elit quis diam cursus ultrices. Nullam
                fermentum semper justo, eu mattis urna maximus ut. Donec nec eleifend
                urna, ut placerat orci. Suspendisse potenti.
                </p>
              </div>
            </td>
          </tr>
        </template>
        <template id=image-block>
          <tr class="image-block">
            <td>
              <style scoped>
                img {
                  display: block;
                  margin-left: auto;
                  margin-right: auto;
                }
              </style>
              <div class="editable">
                <img src="http://placehold.it/350x150" alt="placeholder">
              </div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <button onclick="insert_block('text-block')">Add Text</button>
    <button onclick="insert_block('image-block')">Add Image</button>
    <script>
      "use strict";
      var insert_block = function(block_type) {
        var block = document.querySelector('#' + block_type);
        var clone = block.content.cloneNode(true);
        document.querySelector('#editor').appendChild(clone);
      };
    </script>
  </body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Template Test</title>
	<style>
	h1 { font-family: Georgia; }
	#editor { max-width: 600px; }
	.editable { background-color: #eeeeee; }
	</style>
	</head>

	<body>
	<h1>Editor Demo</h1>
	<p>Using HTML <a href="https://www.w3.org/TR/html5/scripting-1.html#the-template-element">template</a> element</p>
	<table id=editor>
	<tbody>
	<template id=text-block>
	<tr class="text-block">
	<td>
	<style scoped>
	h1, p {
	font-family: serif;
	}
	</style>
	<div class="editable">
	<h1>Lorem Ipsum</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at
	libero consequat, consectetur arcu at, luctus lacus. Curabitur neque mi,
	ultrices vel est nec, fermentum efficitur felis. Pellentesque ac erat
	quis mi iaculis semper quis et turpis. Maecenas facilisis felis vitae
	bibendum pulvinar. Mauris fermentum odio at commodo rhoncus. Mauris neque
	nunc, fringilla id dignissim eget, gravida nec tellus. Nulla eget
	venenatis felis, ut mattis nunc. Mauris eget mi et ipsum tincidunt
	suscipit nec nec urna. Fusce eu elit quis diam cursus ultrices. Nullam
	fermentum semper justo, eu mattis urna maximus ut. Donec nec eleifend
	urna, ut placerat orci. Suspendisse potenti.
	</p>
	</div>
	</td>
	</tr>
	</template>
	<template id=image-block>
	<tr class="image-block">
	<td>
	<style scoped>
	img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	</style>
	<div class="editable">
	<img src="http://placehold.it/350x150" alt="placeholder">
	</div>
	</td>
	</tr>
	</template>
	</tbody>
	</table>
	<button onclick="insert_block('text-block')">Add Text</button>
	<button onclick="insert_block('image-block')">Add Image</button>
	<script>
	"use strict";
	var insert_block = function(block_type) {
	var block = document.querySelector('#' + block_type);
	var clone = block.content.cloneNode(true);
	document.querySelector('#editor').appendChild(clone);
	};
	</script>
	</body>

	</html>