tonioriol/texteditor.html

## texteditor.html
<!-- data:text/html,  -->
<html>
<head>
  <title>Textr0n</title>
  <style>

    body {
      margin: 0;
    }

    #toolbar {
      padding: 10px;
      position: fixed;
      top: 0;
      height: 20px;
      width: 100%;
      background-color: gray;
    }

    #editor {
      margin-top: 40px;
      font-weight:bold;
      font-family:Helvetica;
      font-size:60px;
      border: 0;
      resize: none;
      height: 92%;
      width: 100%;
      padding: 10px;
    }

    #editor:focus {
      outline: none;
    }

    .red {
      color: red;
    }

    .green {
      color: green;
    }

    .blue {
      color: blue;
    }

  </style>

  <script>

    function selection() {

      var selection = window.getSelection();
      if (selection.rangeCount) {
        var container = document.createElement("div");
        for (var i = 0, len = selection.rangeCount; i < len; ++i) {
          container.appendChild(selection.getRangeAt(i).cloneContents());
        }
        console.log(selection.getRangeAt(selection.rangeCount - 1));
      }
    }

    window.onload = function () {


      document.getElementById('bold').onclick = function () {
        selection();
      };


      document.getElementById('color').onchange = function () {
        var val = this.options[this.options.selectedIndex].value;

        var editor = document.getElementById('editor');


          var selectionText = editor.innerHTML.substr(editor.selectionStart, editor.selectionEnd);

          console.log(window.getSelection());
          // editor.innerHTML = '<span class="' + val + '">' + selectionText + '<span>';
      };
    }

  </script>
</head>
<body>
  <div id="toolbar">
    <button id="bold">Bold</button>
    <button>Italic</button>
    <select id="color">
      <option>Color</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
    <select id="color">
      <option>Font Size</option>
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
  </div>
  <div id="editor" placeholder="Edit me..." contenteditable="true"><span class="red">Red<span><span class="green">Green<span></div>
</body>
</html>
	<!-- data:text/html, -->
	<html>
	<head>
	<title>Textr0n</title>
	<style>

	body {
	margin: 0;
	}

	#toolbar {
	padding: 10px;
	position: fixed;
	top: 0;
	height: 20px;
	width: 100%;
	background-color: gray;
	}

	#editor {
	margin-top: 40px;
	font-weight:bold;
	font-family:Helvetica;
	font-size:60px;
	border: 0;
	resize: none;
	height: 92%;
	width: 100%;
	padding: 10px;
	}

	#editor:focus {
	outline: none;
	}

	.red {
	color: red;
	}

	.green {
	color: green;
	}

	.blue {
	color: blue;
	}

	</style>

	<script>

	function selection() {

	var selection = window.getSelection();
	if (selection.rangeCount) {
	var container = document.createElement("div");
	for (var i = 0, len = selection.rangeCount; i < len; ++i) {
	container.appendChild(selection.getRangeAt(i).cloneContents());
	}
	console.log(selection.getRangeAt(selection.rangeCount - 1));
	}
	}

	window.onload = function () {


	document.getElementById('bold').onclick = function () {
	selection();
	};



	document.getElementById('color').onchange = function () {
	var val = this.options[this.options.selectedIndex].value;

	var editor = document.getElementById('editor');


	var selectionText = editor.innerHTML.substr(editor.selectionStart, editor.selectionEnd);

	console.log(window.getSelection());
	// editor.innerHTML = '<span class="' + val + '">' + selectionText + '<span>';
	};
	}

	</script>
	</head>
	<body>
	<div id="toolbar">
	<button id="bold">Bold</button>
	<button>Italic</button>
	<select id="color">
	<option>Color</option>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
	</select>
	<select id="color">
	<option>Font Size</option>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
	</select>
	</div>
	<div id="editor" placeholder="Edit me..." contenteditable="true"><span class="red">Red<span><span class="green">Green<span></div>
	</body>
	</html>