We Keep Coding

Is it possible to focus on textarea after selecting option?

After adding text inside textarea i would like to focus caret just after this input. Unfortunately I can't make function focus() to be called. Although when I use focus() on click it works perfectly
Here is my function:
function append_textarea(textarea, select, div_for_select) {
$(textarea).on('keyup paste cut mouseup', function (event) {
var contentHeight = $(this).textareaHelper('height');
$(this).height(contentHeight);
var obj = $(this).textareaHelper('caretPos');
var left = obj.left + 15;
var top = obj.top + 50;
if (event.which === 219) {
$(div_for_select).attr('style', 'top: ' + top + 'px;' + ' left: ' + left + 'px;').fadeIn();
openDropdown(select);
} else if (event.which === 221) {
$(div_for_select).fadeOut('slow');
}
});
$(div_for_select).on('keydown click', function (event) {
if (event.which === 13 || event.which === 1) {
var $txt = $(textarea);
var caretPos = $txt[0].selectionStart;
var textAreaTxt = $txt.val();
var txtToAdd = $(select).val();
$txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos)).focus();
$(this).fadeOut('slow');
}
});
$(textarea).keyup();
function openDropdown(elementId) {
function down() {
var pos = $(this).offset(); // remember position
var len = $(this).find("option").length;
if (len > 20) {
len = 20;
}
$(this).css("position", "absolute");
$(this).css("zIndex", 9999);
$(this).offset(pos); // reset position
$(this).attr("size", len); // open dropdown
$(this).unbind("focus", down);
$(this).trigger('focus');
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
$(this).trigger('focus')
}
$(elementId).focus(down).blur(up).focus();
}
}
append_textarea('#example', '#select', '.tail');
$('#select').on('click', function () {
$('#example').focus();
});
$('#click').on('click', function () {
$('#example').focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.tail {
position: absolute;
}
textarea {
min-width: 250px;
min-height: 100px;
}
</style>
<!-- #MAIN PANEL -->
<div id="main" role="main">
<!-- RIBBON -->
<div id="ribbon">
<!-- breadcrumb -->
<ol class="breadcrumb">
<li>Home</li>
</ol>
</div>
<!-- col -->
<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
<h1 class="page-title txt-color-blueDark"></h1>
<div class="clearfix"></div>
<textarea id="example"></textarea>
<div class="tail" hidden>
<select id="select">
<option style="display: none;">Please select one</option>
<option value="USER_NAME}">First and Last Name</option>
<option value="WO_NO}">Work Order Number</option>
<option value="PROD}">Product Name and Size</option>
<option value="PROJECT}">Project Name</option>
<option value="MACHINE}">Machine Name</option>
</select>
</div>
<div>
<input type="button" value="CLICK ME!" id="click">
</div>
</div>
</div>
<script src="https://rawgit.com/Codecademy/textarea-helper/master/textarea-helper.js"></script>

Select option hide and show when counter changes

I have some dropdown menu where I want to hide value 550282, if amount of guests is greater to 2 and show when amount of guest is less or equal to 2.
Guest Count is added by JavaScript functions below.
Is this possible through jQuery or there is another method? Snipped code is there and also the [fiddle](https://jsfiddle.net/u3cbntb3/14/).
var hostAmount = 1;
var hosts = [1];
function getSelect(index) {
var retHTML = '<span class="label">Host ' + (index + 1) + ': </span><select name="host' + (index + 1) + '" id="host' + (index + 1) + '">';
if (hosts[index] == 1)
retHTML += '<option value="1" selected="selected">Dospělý</option><option value="2" >Dítě do 15</option><option value="3">Dítě do 10</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>';
else
retHTML += '<option value="1">Dospělý (130Kč)</option><option value="2" selected="selected">Dítě do 15(130Kč)</option><option value="3">Dítě do 10(1Kč)</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>';
if (index != 0)
retHTML += '<span class="delete" onclick="deleteHost(' + index + ');">Smazat</span><br />';
else
retHTML += '<br />';
return retHTML;
}
function saveValues() {
for (var i = 1; i < hostAmount; i++)
hosts[i] = document.getElementById("host" + (i + 1)).value;
}
function actualSelects() {
var HTMLbuff = "";
for (var i = 0; i < hosts.length; i++)
HTMLbuff += getSelect(i);
document.getElementById("personBox").innerHTML = HTMLbuff;
document.getElementById("amount").value = hostAmount;
}
function addHost() {
saveValues();
hosts.push(1);
hostAmount++;
actualSelects();
}
function deleteHost(index) {
hosts.splice(index, 1);
hostAmount--;
actualSelects();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onload="actualSelects()">
<form>
<span class="label">Guest Count: </span><input readonly name="amount" id="amount" type="number" value="1" min="1" /><br />
<div id="personBox">
</div>
<span id="addPerson" onclick="addHost();">Add Host</span><br />
<span>Option</span>
<select name="room-type" class="dropdown-list">
<option id="toremove" selected="selected" value="550282">550282</option>
<option value="550280">550280</option>
<option value="557786">557786</option>
<option value="550284">557786</option>
</select>
</form>
</body>
</html>

Simply, you can hide the selection by document.getElementById("toremove").style.display="none";,
then show it up by document.getElementById("toremove").style.display=""; when guest count <=2.
var hostAmount = 1;
var hosts = [1];
function getSelect(index) {
var retHTML = '<span class="label">Host ' + (index + 1) + ': </span><select name="host' + (index + 1) + '" id="host' + (index + 1) + '">';
if (hosts[index] == 1)
retHTML += '<option value="1" selected="selected">Dospělý</option><option value="2" >Dítě do 15</option><option value="3">Dítě do 10</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>';
else
retHTML += '<option value="1">Dospělý (130Kč)</option><option value="2" selected="selected">Dítě do 15(130Kč)</option><option value="3">Dítě do 10(1Kč)</option><option value="4">Přistýlka</option><option value="5">Vlastní postýlka</option></select>';
if (index != 0)
retHTML += '<span class="delete" onclick="deleteHost(' + index + ');">Smazat</span><br />';
else
retHTML += '<br />';
return retHTML;
}
function saveValues() {
for (var i = 1; i < hostAmount; i++)
hosts[i] = document.getElementById("host" + (i + 1)).value;
}
function actualSelects() {
var HTMLbuff = "";
for (var i = 0; i < hosts.length; i++)
HTMLbuff += getSelect(i);
document.getElementById("personBox").innerHTML = HTMLbuff;
document.getElementById("amount").value = hostAmount;
}
function addHost() {
saveValues();
hosts.push(1);
hostAmount++;
actualSelects();
if(hostAmount>2) {
document.getElementById("toremove").style.display="none";
document.getElementById("toselect").value = ""; //reset the value of select
}
else{
document.getElementById("toremove").style.display="";
}
}
function deleteHost(index) {
hosts.splice(index, 1);
hostAmount--;
actualSelects();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onload="actualSelects()">
<form>
<span class="label">Guest Count: </span><input readonly name="amount" id="amount" type="number" value="1" min="1" /><br />
<div id="personBox">
</div>
<span id="addPerson" onclick="addHost();">Add Host</span><br />
<span>Option</span>
<select name="room-type" class="dropdown-list" id="toselect">
<option id="toremove" selected="selected" value="550282">550282</option>
<option value="550280">550280</option>
<option value="557786">557786</option>
<option value="550284">557786</option>
</select>
</form>
</body>
</html>

Create simple text editor (javascript)

I would like to create a simple text editor in Javascript. The challenge for me is: the buttons above my text-editor should be adjusted on the content of the DOM. For example: if the cursor is within a 'ul'-tag in my text-editor, only button 'li' should be displayed.
I already created a 'content-editable div', but I don't know where to look next. Can someone help me with some ideas? If I can do this with help of an existing JS-text-editor, please say.
<html>
<head>
<style>
#textEditor {
border: 1px solid black; display:block; width: 300px; height: 200px;
}
</style>
<script>
var options = ['ul','div'];
var subOptions = {
'ul':['li'],
'div':['div','span', 'p']
};
</script>
</head>
<body>
<div id="textEditor" contenteditable="true"></div>
</body>
</html>

I Create a simple & rich text editor using the only javascript. Especially I create this for my powerBI custom visual. You can use it in any project.
function chooseColor(){
var mycolor = document.getElementById("myColor").value;
document.execCommand('foreColor', false, mycolor);
}
function changeFont(){
var myFont = document.getElementById("input-font").value;
document.execCommand('fontName', false, myFont);
}
function changeSize(){
var mysize = document.getElementById("fontSize").value;
document.execCommand('fontSize', false, mysize);
}
function checkDiv(){
var editorText = document.getElementById("editor1").innerHTML;
if(editorText === ''){
document.getElementById("editor1").style.border = '5px solid red';
}
}
function removeBorder(){
document.getElementById("editor1").style.border = '1px solid transparent';
}
body {
font: 400 16px/1.4 'serif';
}
#container #containerHeader{
text-align: center;
cursor:move;
}
#container #editor1 {
border: 1px solid grey;
height: 100px;
width: 602px;
margin: 0px auto 0;
padding:10px;
}
#container fieldset {
margin: 2px auto 0px;
width: 600px;
height:26px;
background-color: #f2f2f2;
border:none;
}
#container button {
width: 5ex;
text-align: center;
padding: 1px 3px;
height:30px;
width:30px;
background-repeat: no-repeat;
background-size: cover;
border:none;
}
#container img{
width:100%;
}
#container .bold{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJmSURBVHic7drPi05RHMfx18igGaaJzbAQShby22ZYKBb+CKyMJTsryo/IQigWUjbKnoWVpJSy8TOpIckCC0Xj1zTKGItLWcyZnmbuuY/z+L7rbO73PN/P93y65z73nHsIgiAIgiAIgiAIgiAIgiD43+lqSGc+1qB3Gr/9gfd4h5E6i/oX2YdRTNTQnuA4Fjc6gobYqLoz6jDq7/YVxzC7uaHk57D6jfq73cLCpgYzK3P+RZnz78ANzM2sg/xmNcEgLjQh1AlmwRA25RZpl1nXVa8trbYB7MbLRL4uHMlbcn7OmfzBfG2a+frxKJHzO/pmWO+UlDYNR1RTbjLmYHtO8dLMggd4nogtyylcolnwKnF9IKdoqWb1J65/yilaolkLsSERe5tTuESzjmJeInY3p3BJZvXgDPYn4k+ln2W10K5V+3pcarFvN5ZgCxZM0e/sTItqN6mX0rrbYw3MkpKmYYrP2IWfuYU6wayTeNaEUCeYdQhrmxDqBLP6cFW1NsxKu/4NX+Nmi327VcuYrdK7CmuwFxdnXFkbqXOLpgenE/km8KKGeqekpGk4ioM4n4ivxOqcBZRk1h+OYSwRG8wpXKJZH1W7pZOxPKdwiWaR/ozfnVO0VLNWJK5/ySlaolmbsSoRG84pXJpZ/biciI3jTk7xEszqUp2a2YP7WJfod1t1NKlYmtqimcC23IMp4c5qhSsyT0E6w6yHONCEUG6zPmTOfw87VRuAxZPr5N8YTmlgW6ZphvBNPSYN4wSWNjqC3zR1WrlXtZs5ndPK46rp/Ea1LgyCIAiCIAiCIAiCIAiCIAjaxi96FfJoiZEgRAAAAABJRU5ErkJggg==');
}
#container .italic{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGDSURBVHic7do7SgRBFEbh0z5BwUhQTMxEMDAXQ1EXIS7AHehWBBMznQ0YizsQJhBfiIGB4Rjo4BiMRnZD11BV3eL5oNJbdS/VfyUNkiRJkiRJkvTfFU0f4Ns8sAZMRqr3AnSBfqR6rTABnACDBOsZ2MjXSnoHpBnUz3oApmIddixWoRFtJ66/DKzGKtb0sN4y7NHLsEcWW6T9DK9ozyMWxT5wC3wSb0g94BxYyNhHoxaBd8qH0WnwXK10RPXNSf0w/CkFcEP5oO5o/mFqlR2qb9Vhg+dqpQ7lg/oAlho8V+sY7AEM9poM9gAGewCDvSaDPYDBXpPBHsBgD2Cw12SwBzDYazLYAxjsAQz2mgz2AAZ7TQZ7AIM9gMHOMLTPgFeqb07o6gPXwF7GPpIrgEviDals7WbrJrEV0g5qAJxm66ZEzFdnJmKtKrMZ9qgUc1hd4ClivTIXietntcnwX84Un+AxMJ6vld9S/Og1DawDc5Hq9YF74DFSPUmSJEmSJEnSyL4AJ3NtCSNV9DYAAAAASUVORK5CYII=');
}
#container .underline{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJhSURBVHic7drNahNRGMbxfw1WLBaiVtSioLiQrHSpWxERxAvQCxDcqjdRRBBX4qbriis3ikLxAhR3UhRcKC3FD6wgtmJ1XJwUnGTONCd5z5yZ8PzgUEjI+57zdD6SmQERERERERERkaaZAuaAd90x132taT0qMQ9kPWO+gT2i2wls0L+QTWBPg3rk7IhRFJgFdhW83gL2N6hHTqywJoZ8r249cmKFNZYUVgCFFUBhBVBYARRWAIUVQGEFUFgBFFYAhRVAYQVQWAEUVoBYYW2UvLfXqEfZNaufRj1yYoW1hrtqWeSIUQ9fnb/Ad6MeOTG3rI+e984Z9fDV+QD8MupRmUf0Xx/PcIuZHLH2JO6fUVR/YcTaXjEP8M88rx8Fro1Y+zr+3dDXt9b2UXz3JQO+ASeHrNvBHZOK6q5jdwKp3D2KF5UBb4FjgfWO426m+mretZh0KgfwbwUZ8Am4NGCty8DnklprwIzh3JO4hX+BW2MRuAK0ez7bBq4CLwaocSPuMqoxATxk+8VujVXgTffvoJ9ZINK9whSmgFcMvviQ8ZKGPgxSZhp4jG1QT+nfdcdGC7gN/GG0kDZxjxe1qp1+Gh3CjmP/j+fAqeqnnN5Z4AGwTHlAy8B94EyaaTp1OoOcwH2rn8U9e/UbWAGWgPcJ5yUiIuMuxtlwGjgNHIpQe1CrwGvgR8I5bOsC8JU4vwFDxxfgfNzlDm83YVcKqhgrFD/+PRTLa/Ad4KBhPQuHcfMyYRlWlHt1Buo6LxZJv+v1/ug2Y302bAN3gIu4Y1gq68AT4CY13rJERERERERERJx/gYhfcxk8X00AAAAASUVORK5CYII=');
}
#container .align-left{
background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA1CAAAAAAsDUmHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+MIHAYHAD13ih8AAAIrSURBVEjHzZaxTxRBFMa/N7OH0FJqSwnChsTYnomKnJUKFOo1JrbGwpBYmwCV0X9AvMRK1IJ4OTtjYyCQ44xWtNpaa9x5z+IIt7vHbGYeV3DlJvfLm2++b76XCEb2S3DGWeJIRxBLJZboJxShAkvo94uuajBJH00ewZIj1J8bu4Y1LLPd/jLRh/VZLtnaPacTjGp7b5suyev1C5zp5CL8LGhPuASnFJ9xGXm9rNRXN0QVAZInV8Tm75FkfeWHSi+eTkueAHGaKv3Fpux7w6xDGTOcx8G3EeQx5m+WKlgiUZZgkJ9Ff9/sB9+jzN8dF/KwhOR2OzyPhrc+mmFYn8X2fXuMw8VPOu+W2HrmwmFUHhMcQjxnJMyAasEZIuAifHpZaTRbMXrduwnru0fCq5WDYL14bqHKq4LFxRh/SZW/yEU8OWQrMwR72jjmWE65DQxmHORRPRdT+S2UT10dKr1a6m2hB5vKfuTm60LXOtveTEj1GJJpLTeczefxG/BPe3u9hhTyOAWj7EeDqUI/Gtxa6Cj1yq7dgcnPJeZDq6vSi9P7pqA9SMYeqv011LXItKyhvRB0+s11QIjp7ZN7+ZjFUb19Ys8cZ9v0voejpmcr3kKhp2sU3h2yuu7tWmc/r8WckTeu1523H3dgI/JY46918ep1HiYJP6PBBa/2Fksv9yL6MZtf9vYjyXjneS+8H2cfT3i1B8nksxiLS2U/ShaxRkvlXjjaPOJMsf4DQ22vjD/V/uUAAAAASUVORK5CYII=');
width:40px;
}
#container .align-right{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA1CAAAAAAsDUmHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAACYktHRAAAqo0jMgAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+MIHAYOC3tn6N4AAAIsSURBVEjHzZexaxRBFMa/NzMXkzaltimjcQmI7QlqzFmpSQr1GsFWLCRgLSSpRP8B44GViRYhx9mJjRgi54lWabW1VtyZZ5GAM7uZZeYlRbbchY8337zf+94axrE9Bidciy3JFFhTRYvlFTJToMX069lQVBgXDyYPxMyB1O9rO8pJtNRW/8PEvti+ljUbO6dkhlFr93XXGt+vn3ClzC7Cj8B7wgVYofkOF+H7pbm9vMYiBIgfXWLt3yPx6tJ3kV9uuqj0BMgVhbC/nKr2vXJOJqVUncf/746VbbY5EjUeQ8Cy2sOB4lr059Xn5Dvl2dvjAY/BR+Kb/XQ2ldvYVj6PQcn6TX/MpV+EGWwuOB2pC3tZbBrsgSNnJJwFtZJ5IuAcYn5p7nR7OX7duQ4du0fCi6UvyX6583NNvcqYn8/pL27qL7IZ44d0I0PQR+TRCreBel3MsloAOKrOQn43lEkVlytzguneujAfXfdlwLbV/XVDomFIqrfYsR6PjK/AX9kZDUYdn0fCFJQwHxWmAh4VbswNhH6VV25B+XWxetsbivxyxV0VzlXisfvi/qplLUqpVj2H6Oib6+EKORl+WG77UlkZXt8nvIfV6Fu61PRMwyxkerxC6dnBy6vRrLX6/UrOGd3a1baN5uMn6Aw2W+5jm6N+nYYy6WdUOBP1XmPh+W5GPpazi9F8JB4fPB2l5+PMw4mo9yCefJLT7tyYj1xmrNTcuBdK2Typ/7X/ACjdr4z8YnCHAAAAAElFTkSuQmCC');
width:40px;
}
#container .align-center{
width: 38px;
background-size: contain;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAABGdBTUEAALGPC/xhBQAAADRJREFUOBFjYGBg2ArE/6mEtzIBDaImADlsCAJSwhSkFgVQGoYjIMwIpdfRdAhJUYMrHQIAWPdBdW2q70gAAAAASUVORK5CYII=');
}
#container .redo-apply{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKJSURBVHic7du7axRRGIbxn260MELQIoIIFjYBa01lI0btFVEQRBtbSeEFUmhnbeEfoOK1EkQQKxsLUbH00gQLxesuRBANMRZrIJHd2T3jzsyOfA98zdnZc9555sxyZnaGIAiCIAjqw2HcwTXsrjjLUHMBi8vqF85UmmhIWY95K2Ut1dkKcw0lEzqLCmEdWINPQljfHMCCENY3x/UWNlNZuiEkhCUSwhIJYYmEsERCWCIhLJFShK361w56MIot2IS1BY91DEd7bHMOFwvOkcQmnMZjvY92FTVd3K73zyjOY071QrLqJ7YXo6A/tuKF6kX0W6fy7ORIni/9xQQeYXwAfZVFq4pBN+C16mdKSr37k7t0bucIW2W1MFmIiR5Mat8LzzqC09iGRsFZRrT/zOglamfBObpyLyPYA4yVlKMfUU0VihrDjy7BnmNdSTmGXhQc6hBqqXaVlKFfUTtKytOVGZ3DvSlp/NqIgss6B7xVwtgNXO8yfqE/5nkXpd3WKc28QfpkBDdwMGObJvbi6aAHXz3g/hYH3N9yGrgiW1QL+xUgisHLKooGruJIxjYt7MOTokIM4tqwDC7JFtXEFJ4VGaIOM2scJzM+L0UU9ZhZ47pfLjWxR3shXDh1mFmv8KFD+1cliqIesuZxAt+Xtc0qWRT1OA3hvvbdiynt29YP8a3sEHWRBe+111mVUYfTcGgIWQmErARCVgIhK4GQlUDISiBkJRCyEghZCYSsBEJWAiErgZCVQMhKIGQlELISCFkJhKwEQlYCISuBkJVAXlkLXdqLfOSocvLKetmlfTZnf/81m/HRykcT32JjlaGKJu/D/HO4qf2+4hfc1X5B8vOAcgVBEARBMJT8BsNk0YqzYcGdAAAAAElFTkSuQmCC');
}
#container .undo-apply{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALFSURBVHic7ZzPi05RGMc/M0aSJDZMUXaSlB3T+DGkWCgW2Cn+AYVsSBo/xm78LpoihcmUlIXyIxbWYolSQ7IgeY0fM2Te1+JsmO499zz3fZ97jvF86mxuvef53k/nvfe8z729YBiGYRhGHLYCQ8A1YEPkLMnSBpwDGhPGrpihUiRPVAN4FzFXcrQBZ8gW1QDqwPRo6RLjFPmiGsDTeNHSoh+/qFGgK1q6hOjDL+oHsClauoQ4jokK4hgmKoijmKggjmCigujFRAVxGBMVxH7+E1EdTX7+AG6L4OMsMAasb7JWFp+AYeCjwtwtZS/+FVXleA1cBjYC7ZonXYYlwE/iS8oaL4EduB/vSbCH+FKKxmNgYStPuuyS/dzKEEqsxHUz1sYOMhvXsIu9ekLGGO5aFpXlQI34MkLGV2CZjoZwVuC+kr6gQzS/RcliKrAA2A7cAH4V5HgBzFDIIaKLYmGDwBTlHIuBRwU5+pQzBNENjOAPehV9YR3ARU+G78Bc5QxBdANf8Au7gv6msR245cnQq1w/mFUUC7uEvrBZwIec+q+Ua4tYjbv7+IQNoL/D3uepv0i5tog1FAu7gK6wecB4Tu3knoD3AN/wCzuPrrAnOXVPKNYsTcg17DR6wm7m1BxQqtc06yheYQeVaudtIwbLTFZF7+chsBn35DmPQ7g7WKupt3KyqhplD/ALmwbMryhLaarsKt4HtuC6ABMZIbH9TxZVt2Dv4YTV/jhWB3aTLTEpNLoBRdwFlgLbgJnAbeBZhBxiYsgCeAucjFS7NMk9CUkZkyXAZAkwWQJMlgCTJcBkCTBZAkyWAJMlwGQJMFkCTJYAkyXAZAkwWQJMlgCTJcBkCTBZAkyWAJMlYLLLGs853igz2WSX9Tzn+HCVIf4V5gBv+Pt1o/dAZ5nJtF+1js0ocB0nqQbcAXZi/31jGIZhGCX5DTQy/pTFeqp6AAAAAElFTkSuQmCC');
}
#container .unorderedlist{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAI0SURBVHic7dq7axRBGADw30UloEaICAbBQoVgwEcvKWx8gEh6sUqhf4jYaauFVtFGwUK00MrOR2ER8ZFCFBUj+ERFET2NxSgiZHbv9kJul3w/+JrZb4eZ79i527khhBBCCCGEEEIIIYQQlrpWBzkbMIIZfO0gfznGsL6HcS22H3iAt1U7aOEUfmIOH3Co5J5xzP7Jb2KcxbIu6wQOz9PZN2zJ5A/ieQ0m3GsczRVkoKBYE5mC7M/kj2FjQX9NsS93oahYnzPtnzLtnaxnTfClyk27/Fuv/sYrDGfyW7ipP4/OQsaeKsUiPYrT+Igb2FmSP4JL0qfT70l3E7/wWFqnQwghhBBCqK+y/awhHMEo7mAK7ZJ7DmA31vQ6uEU0J/2Cn8LrKh2sxVP/vxZcUVzgYxb/VWUhY1ba7Oza8UyHuRfNdfhegwn3GidyBSnaotmRad+ead+MFQX9NcXW3IWiYk1n2u9l2p9Ie9lNN1PlpvnWrMuW8JrVybfhpPSI3cYFae+nyEFpa7Zpj+RLnMabfg8khBBCCCGEyiZwF+9xDdtK8kdwEe/0/9Wlm2jjvh7+ka5y1uFWDSbea+ytUqzzmc4mM/mjNZjoQsS5XEGKtmiGMu2rM+0rC/pqklW5C0XFujpPWxvXM/mP8KKLQdVVbn6FBnBSKtCcdKa0bAEcl7Y6+v0oVY0zCs6UdnJaeRib8FA6U1pmUDrH1aR/d9rSRuezfg8khBBCCCGEEEIIIYQQ6u03kq1rwGv96WIAAAAASUVORK5CYII=');
}
#container .orderedlist{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJDSURBVHic7dq9TxRBGMfx7x2KQfSQzhCICRgSk9OKBgobwY6KhARLC/4CaioKqAQLGwtfao0k0BITNbGSoFEIEBrsjAQTCETepJi7gMfOvrl7Oye/TzLNZGb3mefYJfPsgIiIiIiIiIiIiMh5lws57gJQBLaAtZBzmoHbQH2MuLLyE/gG7Me9QBFYBf6U2nvgus/4HPAYODo1p5baD6A3Rp7IAV89LvjaZ84DBxacRMKuRE3WTcvFdjGPppfnDiw2iXa3cmH5gGTtlCZWOsA8ZrY5/4NY65jmbNYf+YzvpnbfV+X2GaiLniooAE+BX5hneRz7I1g2ACwDhw4sPErbBWaAtqhJEhERERGpirD1rKiuAQ+BdmAeeInZT/q5B9wvzc3KNvABeFOtGzYDK/y9jZjDf681QjbbG1ub/McchDZqCWDQMr6Bk+qGK+0QuFEZaFCJJo6ipf+Opb8NkzCX5IFOr86kLVr6lyz93zG7fZccYaomqWvCJOb0n/U7/D9c1MQ7K63/hgVgGFOW/gS8APYC5vQB/cCllGIK4wB4C7zKMAYREREREfcVgGfAJrAOjBF8rmsAWMDsDJLa5mxijis4/UV6hrOBT/iM7yHd8xRfCD6ikIkWvAPewL53fWKZk2TrqrxpGiWaqBot/Vex/7qXU4ql2veIzHa6cNZnzpDH+CRbrJN/1XILU2wrB/uR4HOrU6Tz3rKeKU2rnhVHHlOS/s3JB48grUAHcDGhGLYxB9lcq9yKiIiIiIiIiIiIOOIYaxc11Cpvh4UAAAAASUVORK5CYII=');
}
#container .strikethrough{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAAAmJLR0QA/4ePzL8AAABFSURBVEjHY2AY2eAww38i4GHsmv8TCXFqxmYYPjVIzj5MUPNhXM7G5Q2ywKhm2mo+TG7ipFjzYAGjiYTs8uwwHTUPZwAAW5aYHd3noZcAAAAASUVORK5CYII=');
}
#container .color-apply{
width: 20px;
}
#container #input-font{
width: 100px;
height: 25px;
}
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-text);
color:#888;
}
#container .loader {
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
margin: 0 auto;
line-height: 20px;
}
/* #keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} */
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script type="text/javascript" src="custom-text-editor.js"></script>
<link type="text/css" rel="stylesheet" href="custom-text-editor.css"/>
</head>
<body>
<div id="container" >
<fieldset>
<button class="fontStyle italic" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"></button>
<button class="fontStyle bold" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"></button>
<button class="fontStyle underline" onclick="document.execCommand( 'underline',false,null);"></button>
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Sans serif">Sans serif</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Tahoma">Tahoma</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<button class="fontStyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);"><strikethrough></strikethrough></button>
<button class="fontStyle align-left" onclick="document.execCommand( 'justifyLeft',false,null);"><justifyLeft></justifyLeft></button>
<button class="fontStyle align-center" onclick="document.execCommand( 'justifyCenter',false,null);"><justifyCenter></justifyCenter></button>
<button class="fontStyle align-right" onclick="document.execCommand( 'justifyRight',false,null);"><justifyRight></justifyRight></button>
<button class="fontStyle redo-apply" onclick="document.execCommand( 'redo',false,null);"><redo></redo></button>
<button class="fontStyle undo-apply" onclick="document.execCommand( 'undo',false,null);"><undo></undo></button>
<button class="fontStyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"><insertOrderedList></insertOrderedList></button>
<button class="fontStyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"><insertUnorderedList></insertUnorderedList></button>
<input class="color-apply" type="color" onchange="chooseColor()" id="myColor">
<!-- font size start -->
<select id="fontSize" onclick="changeSize()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<!-- font size end -->
</fieldset>
<div id="editor1" contenteditable="true" data-text="Enter comment...."></div>
</div>
</body>
</html>

You can make a contenteditable html element so the user can edit it.
<div id="myDiv" contenteditable = "true" style = "border: 1px solid black">
<!DOCTYPE html><br>
<html><br>
<head><br>
<br>
<br>
</head><br>
<body><br>
<br>
<br>
</body><br>
</html>
</div>
<script>
w3CodeColor(document.getElementById("myDiv"));
function w3CodeColor(elmnt, mode) {
var lang = (mode || "html");
var elmntObj = (document.getElementById(elmnt) || elmnt);
var elmntTxt = elmntObj.innerHTML;
var tagcolor = "mediumblue";
var tagnamecolor = "brown";
var attributecolor = "red";
var attributevaluecolor = "mediumblue";
var commentcolor = "green";
var cssselectorcolor = "brown";
var csspropertycolor = "red";
var csspropertyvaluecolor = "mediumblue";
var cssdelimitercolor = "black";
var cssimportantcolor = "red";
var jscolor = "black";
var jskeywordcolor = "mediumblue";
var jsstringcolor = "brown";
var jsnumbercolor = "red";
var jspropertycolor = "black";
elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
if (!lang) {lang = "html"; }
if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
if (lang == "css") {elmntTxt = cssMode(elmntTxt);}
if (lang == "js") {elmntTxt = jsMode(elmntTxt);}
elmntObj.innerHTML = elmntTxt;
function extract(str, start, end, func, repl) {
var s, e, d = "", a = [];
while (str.search(start) > -1) {
s = str.search(start);
e = str.indexOf(end, s);
if (e == -1) {e = str.length;}
if (repl) {
a.push(func(str.substring(s, e + (end.length))));
str = str.substring(0, s) + repl + str.substr(e + (end.length));
} else {
d += str.substring(0, s);
d += func(str.substring(s, e + (end.length)));
str = str.substr(e + (end.length));
}
}
this.rest = d + str;
this.arr = a;
}
function htmlMode(txt) {
var rest = txt, done = "", php, comment, angular, startpos, endpos, note, i;
comment = new extract(rest, "<!--", "-->", commentMode, "W3HTMLCOMMENTPOS");
rest = comment.rest;
while (rest.indexOf("<") > -1) {
note = "";
startpos = rest.indexOf("<");
if (rest.substr(startpos, 9).toUpperCase() == "&LT;STYLE") {note = "css";}
if (rest.substr(startpos, 10).toUpperCase() == "&LT;SCRIPT") {note = "javascript";}
endpos = rest.indexOf(">", startpos);
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += tagMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
if (note == "css") {
endpos = rest.indexOf("</style>");
if (endpos > -1) {
done += cssMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
if (note == "javascript") {
endpos = rest.indexOf("</script>");
if (endpos > -1) {
done += jsMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
}
rest = done + rest;
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("W3HTMLCOMMENTPOS", comment.arr[i]);
}
return rest;
}
function tagMode(txt) {
var rest = txt, done = "", startpos, endpos, result;
while (rest.search(/(\s|<br>)/) > -1) {
startpos = rest.search(/(\s|<br>)/);
endpos = rest.indexOf(">");
if (endpos == -1) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
}
result = done + rest;
result = "<span style=color:" + tagcolor + "><</span>" + result.substring(4);
if (result.substr(result.length - 4, 4) == ">") {
result = result.substring(0, result.length - 4) + "<span style=color:" + tagcolor + ">></span>";
}
return "<span style=color:" + tagnamecolor + ">" + result + "</span>";
}
function attributeMode(txt) {
var rest = txt, done = "", startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
while (rest.indexOf("=") > -1) {
endpos = -1;
startpos = rest.indexOf("=");
singlefnuttpos = rest.indexOf("'", startpos);
doublefnuttpos = rest.indexOf('"', startpos);
spacepos = rest.indexOf(" ", startpos + 2);
if (spacepos > -1 && (spacepos < singlefnuttpos || singlefnuttpos == -1) && (spacepos < doublefnuttpos || doublefnuttpos == -1)) {
endpos = rest.indexOf(" ", startpos);
} else if (doublefnuttpos > -1 && (doublefnuttpos < singlefnuttpos || singlefnuttpos == -1) && (doublefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf('"', rest.indexOf('"', startpos) + 1);
} else if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1) && (singlefnuttpos < spacepos || spacepos == -1)) {
endpos = rest.indexOf("'", rest.indexOf("'", startpos) + 1);
}
if (!endpos || endpos == -1 || endpos < startpos) {endpos = rest.length;}
done += rest.substring(0, startpos);
done += attributeValueMode(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
return "<span style=color:" + attributecolor + ">" + done + rest + "</span>";
}
function attributeValueMode(txt) {
return "<span style=color:" + attributevaluecolor + ">" + txt + "</span>";
}
function commentMode(txt) {
return "<span style=color:" + commentcolor + ">" + txt + "</span>";
}
function cssMode(txt) {
var rest = txt, done = "", s, e, comment, i, midz, c, cc;
comment = new extract(rest, /\/\*/, "*/", commentMode, "W3CSSCOMMENTPOS");
rest = comment.rest;
while (rest.search("{") > -1) {
s = rest.search("{");
midz = rest.substr(s + 1);
cc = 1;
c = 0;
for (i = 0; i < midz.length; i++) {
if (midz.substr(i, 1) == "{") {cc++; c++}
if (midz.substr(i, 1) == "}") {cc--;}
if (cc == 0) {break;}
}
if (cc != 0) {c = 0;}
e = s;
for (i = 0; i <= c; i++) {
e = rest.indexOf("}", e + 1);
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s + 1);
done += cssPropertyMode(rest.substring(s + 1, e));
rest = rest.substr(e);
}
rest = done + rest;
rest = rest.replace(/{/g, "<span style=color:" + cssdelimitercolor + ">{</span>");
rest = rest.replace(/}/g, "<span style=color:" + cssdelimitercolor + ">}</span>");
for (i = 0; i < comment.arr.length; i++) {
rest = rest.replace("W3CSSCOMMENTPOS", comment.arr[i]);
}
return "<span style=color:" + cssselectorcolor + ">" + rest + "</span>";
}
function cssPropertyMode(txt) {
var rest = txt, done = "", s, e, n, loop;
if (rest.indexOf("{") > -1 ) { return cssMode(rest); }
while (rest.search(":") > -1) {
s = rest.search(":");
loop = true;
n = s;
while (loop == true) {
loop = false;
e = rest.indexOf(";", n);
if (rest.substring(e - 5, e + 1) == " ") {
loop = true;
n = e + 1;
}
}
if (e == -1) {e = rest.length;}
done += rest.substring(0, s);
done += cssPropertyValueMode(rest.substring(s, e + 1));
rest = rest.substr(e + 1);
}
return "<span style=color:" + csspropertycolor + ">" + done + rest + "</span>";
}
function cssPropertyValueMode(txt) {
var rest = txt, done = "", s;
rest = "<span style=color:" + cssdelimitercolor + ">:</span>" + rest.substring(1);
while (rest.search(/!important/i) > -1) {
s = rest.search(/!important/i);
done += rest.substring(0, s);
done += cssImportantMode(rest.substring(s, s + 10));
rest = rest.substr(s + 10);
}
result = done + rest;
if (result.substr(result.length - 1, 1) == ";" && result.substr(result.length - 6, 6) != " " && result.substr(result.length - 4, 4) != "<" && result.substr(result.length - 4, 4) != ">" && result.substr(result.length - 5, 5) != "&") {
result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">;</span>";
}
return "<span style=color:" + csspropertyvaluecolor + ">" + result + "</span>";
}
function cssImportantMode(txt) {
return "<span style=color:" + cssimportantcolor + ";font-weight:bold;>" + txt + "</span>";
}
function jsMode(txt) {
var rest = txt, done = "", esc = [], i, cc, tt = "", sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, numpos, mypos, dotpos, y;
for (i = 0; i < rest.length; i++) {
cc = rest.substr(i, 1);
if (cc == "\\") {
esc.push(rest.substr(i, 2));
cc = "W3JSESCAPE";
i++;
}
tt += cc;
}
rest = tt;
y = 1;
while (y == 1) {
sfnuttpos = getPos(rest, "'", "'", jsStringMode);
dfnuttpos = getPos(rest, '"', '"', jsStringMode);
compos = getPos(rest, /\/\*/, "*/", commentMode);
comlinepos = getPos(rest, /\/\//, "<br>", commentMode);
numpos = getNumPos(rest, jsNumberMode);
keywordpos = getKeywordPos("js", rest, jsKeywordMode);
dotpos = getDotPos(rest, jsPropertyMode);
if (Math.max(numpos[0], sfnuttpos[0], dfnuttpos[0], compos[0], comlinepos[0], keywordpos[0], dotpos[0]) == -1) {break;}
mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, dotpos);
if (mypos[0] == -1) {break;}
if (mypos[0] > -1) {
done += rest.substring(0, mypos[0]);
done += mypos[2](rest.substring(mypos[0], mypos[1]));
rest = rest.substr(mypos[1]);
}
}
rest = done + rest;
for (i = 0; i < esc.length; i++) {
rest = rest.replace("W3JSESCAPE", esc[i]);
}
return "<span style=color:" + jscolor + ">" + rest + "</span>";
}
function jsStringMode(txt) {
return "<span style=color:" + jsstringcolor + ">" + txt + "</span>";
}
function jsKeywordMode(txt) {
return "<span style=color:" + jskeywordcolor + ">" + txt + "</span>";
}
function jsNumberMode(txt) {
return "<span style=color:" + jsnumbercolor + ">" + txt + "</span>";
}
function jsPropertyMode(txt) {
return "<span style=color:" + jspropertycolor + ">" + txt + "</span>";
}
function getDotPos(txt, func) {
var x, i, j, s, e, arr = [".","<", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%"];
s = txt.indexOf(".");
if (s > -1) {
x = txt.substr(s + 1);
for (j = 0; j < x.length; j++) {
cc = x[j];
for (i = 0; i < arr.length; i++) {
if (cc.indexOf(arr[i]) > -1) {
e = j;
return [s + 1, e + s + 1, func];
}
}
}
}
return [-1, -1, func];
}
function getMinPos() {
var i, arr = [];
for (i = 0; i < arguments.length; i++) {
if (arguments[i][0] > -1) {
if (arr.length == 0 || arguments[i][0] < arr[0]) {arr = arguments[i];}
}
}
if (arr.length == 0) {arr = arguments[i];}
return arr;
}
function getKeywordPos(typ, txt, func) {
var words, i, pos, rpos = -1, rpos2 = -1, patt;
if (typ == "js") {
words = ["abstract","arguments","boolean","break","byte","case","catch","char","class","const","continue","debugger","default","delete",
"do","double","else","enum","eval","export","extends","false","final","finally","float","for","function","goto","if","implements","import",
"in","instanceof","int","interface","let","long","NaN","native","new","null","package","private","protected","public","return","short","static",
"super","switch","synchronized","this","throw","throws","transient","true","try","typeof","var","void","volatile","while","with","yield"];
}
for (i = 0; i < words.length; i++) {
pos = txt.indexOf(words[i]);
if (pos > -1) {
patt = /\W/g;
if (txt.substr(pos + words[i].length,1).match(patt) && txt.substr(pos - 1,1).match(patt)) {
if (pos > -1 && (rpos == -1 || pos < rpos)) {
rpos = pos;
rpos2 = rpos + words[i].length;
}
}
}
}
return [rpos, rpos2, func];
}
function getPos(txt, start, end, func) {
var s, e;
s = txt.search(start);
e = txt.indexOf(end, s + (end.length));
if (e == -1) {e = txt.length;}
return [s, e + (end.length), func];
}
function getNumPos(txt, func) {
var arr = ["<br>", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%", "="], i, j, c, startpos = 0, endpos, word;
for (i = 0; i < txt.length; i++) {
for (j = 0; j < arr.length; j++) {
c = txt.substr(i, arr[j].length);
if (c == arr[j]) {
if (c == "-" && (txt.substr(i - 1, 1) == "e" || txt.substr(i - 1, 1) == "E")) {
continue;
}
endpos = i;
if (startpos < endpos) {
word = txt.substring(startpos, endpos);
if (!isNaN(word)) {return [startpos, endpos, func];}
}
i += arr[j].length;
startpos = i;
i -= 1;
break;
}
}
}
return [-1, -1, func];
}
}
</script>

Implementing your own javascript text editor is very challenging, I would recommend you to have a look at the medium editor
If you really want to build your own, and you want to know what element the users cursor is in. You will need to use the selection API which overall has great browsers support.

Try this simple text editor:
<div class="hb-editor">
<div id="editor-element"></div>
<textarea id="editor" class="hb-text-editor" style="direction: ltr;"></textarea>
<div id="editor-view-raw" style="margin: 15px; display: none;"></div>
</div>
$(document).ready(function(){
let editor = new TextEditor(
'#editor',
'#editor-view-raw',
'#editor-element'
);
editor.start();
});
Visit https://github.com/Ho3ein83/texteditor for more

This code is about "Simple Text editor". This html code submit to upload.php.
This js code converts what <div id="editor1" contenteditable="true"></div> typed into a <textarea id="my-textarea" name="t" style="display:none"></textarea> value. :
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("editor1").innerHTML;
}
When this button
<button class="fontStyle save" onclick="save()"><save>fas fa-save</save></button> is clicked will direct the relevant data to upload.php from this code. :
function save() {
getContent();
document.getElementById("save").submit();
}
The source code is Editor.html :
<html>
<head>
<style>
body {
font: 400 16px/1.4 'serif';
}
#container #containerHeader{
text-align: center;
cursor:move;
}
#container #editor1 {
border: 1px solid grey;
height: 80%;
width: 80%;
margin: 0px auto 0;
padding:10px;
}
#container fieldset {
margin: 2px auto 0px;
width: 80%;
height:10%;
background-color: #fafafa;
border:none;
}
#container button {
width: 5ex;
text-align: center;
padding: 1px 3px;
height:30px;
width:40px;
background-repeat: no-repeat;
background-size: cover;
border:none;
}
#container img{
width:100%;
}
</style>
<script>
function chooseColor(){
var mycolor = document.getElementById("myColor").value;
document.execCommand('foreColor', false, mycolor);
}
function backColor(){
var nColor = document.getElementById("nColor").value;
document.execCommand('backColor', false, nColor);
}
function changeFont(){
var myFont = document.getElementById("input-font").value;
document.execCommand('fontName', false, myFont);
}
function changeSize(){
var mysize = document.getElementById("fontSize").value;
document.execCommand('fontSize', false, mysize);
}
function checkDiv(){
var editorText = document.getElementById("editor1").innerHTML;
if(editorText === ''){
document.getElementById("editor1").style.border = '5px solid red';
}
}
function removeBorder(){
document.getElementById("editor1").style.border = '1px solid transparent';
}
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("editor1").innerHTML;
}
function save() {
getContent();
document.getElementById("save").submit();
}
</script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div id="container" >
<fieldset>
<button class="fontStyle cut" onclick="document.execCommand('cut',false,null);" title="cut(Ctrl+x)"></button>
<button class="fontStyle copy" onclick="document.execCommand('copy',false,null);" title="copy(ctrl+c)"></button>
<button class="fontStyle italic" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"></button>
<button class="fontStyle bold" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"></button>
<button class="fontStyle underline" onclick="document.execCommand( 'underline',false,null);"> </button>
<select id="input-font" class="input" onchange="changeFont (this);">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Sans serif">Sans serif</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Tahoma">Tahoma</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<button class="fontStyle subscript" onclick="document.execCommand( 'subscript',false,null);"><subscript>  </subscript></button>
<button class="fontStyle superscript" onclick="document.execCommand( 'superscript',false,null);"><superscript>  </superscript></button>
<button class="fontStyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);"><strikethrough> </strikethrough></button>
<button class="fontStyle align-left" onclick="document.execCommand( 'justifyLeft',false,null);"><justifyLeft> </justifyLeft></button>
<button class="fontStyle align-center" onclick="document.execCommand( 'justifyCenter',false,null);"><justifyCenter>  </justifyCenter></button>
<button class="fontStyle align-right" onclick="document.execCommand( 'justifyRight',false,null);"><justifyRight>  </justifyRight></button>
<button class="fontStyle redo-apply" onclick="document.execCommand( 'redo',false,null);"><redo></redo></button>
<button class="fontStyle undo-apply" onclick="document.execCommand( 'undo',false,null);"><undo></undo></button>
<button class="fontStyle createlink" onclick="document.execCommand( 'createLink',false,null);"><link> </link></button>
<button class="fontStyle unlink" onclick="document.execCommand( 'unlink',false,null);"><link> </link></button>
<button class="fontStyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"><insertOrderedList></insertOrderedList></button>
<button class="fontStyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"><insertUnorderedList></insertUnorderedList></button>
<button class="fontStyle save" onclick="save()"><save>fas fa-save</save></button>
<input class="color-apply" type="color" onchange="backColor()" id="nColor" title="highlight">
<input class="color-apply" type="color" onchange="chooseColor()" id="myColor" title="font color">
<!-- font size start -->
<br>
font size :
<select id="fontSize" onclick="changeSize()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<!-- font size end -->
</fieldset>
<form method="get" id ="save" action="upload.php">
<div id="editor1" contenteditable="true">
</div>
<textarea id="my-textarea" name="t" style="display:none"></textarea>
</form>
</div>
</body>
</html>

The document.execCommand() function is deprecated. So these answers are also deprecated.
The thing you need now is document.getSelection() function.

I make a text editor. Its very super simple editor. Using just simple tricks. Here is jquery full source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML page editor</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/funnel_v2/files/editorscript/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<h1 class="edit_me_plz" id="jakir">header</h1>
</div>
<div class="col-sm-6">
<button class="edit_me_plz btn btn-info" id="button2">Button</button>
</div>
</div>
<script type="text/javascript">
$(function() {
$(".edit_me_plz").dblclick(function(){
make_element_editable(this);
});
});
function make_element_editable(me){
$( '<textarea onblur="set_my_new_text_with_tag(\''+$(me)[0].localName+'\',\''+$(me)[0].id+'\',this)" style="display: block; width: 100%;">'+$(me)[0].innerHTML+'</textarea>' ).insertAfter(me);
$(me).hide();
}
function set_my_new_text_with_tag(prev_ele,id,me){
$(me).remove();
$("#"+id)[0].innerHTML = $(me)[0].value;
$("#"+id).show();
}
</script>
</body>
</html>
hope you like it. Happy coding. :)

<script>
window.addEventListener('load', function(){
document.getElementById('sampleeditor').setAttribute('contenteditable', 'true');
document.getElementById('sampleeditor2').setAttribute('contenteditable', 'true');
});
function format(command, value) {
document.execCommand(command, false, value);
}
function setUrl() {
var url = document.getElementById('txtFormatUrl').value;
var sText = document.getSelection();
document.execCommand('insertHTML', false, '' + sText + '');
document.getElementById('txtFormatUrl').value = '';
}
</script>
<script>
function changeFont(){
var myFont = document.getElementById("input-font").value;
document.execCommand('fontName', false, myFont);
}
function changeSize(){
var mysize = document.getElementById("fontSize").value;
document.execCommand('fontSize', false, mysize);
}
function changeColor(){
var mysize = document.getElementById("fontColor").value;
document.execCommand('fontColor', false, myColor);
}
function chooseColor(){
var mycolor = document.getElementById("myColor").value;
document.execCommand('foreColor', false, mycolor);
}
</script>
<style>
.editor
{
border:solid 1px #ccc;
padding: 20px;
outline: none;
height: 80%;
}
.sample-toolbar
{
border:solid 1px #ddd;
background:#0055FF;
padding-left: 5px;
padding-bottom: 15px;
padding-top: 15px;
border-radius:3px;
}
a {
padding: 10px 15px;
background: #0055FF;
border: 1px solid #0000;
color: white;
text-decoration: none;
font-size: 15px;
border-radius:3px;
}
a:hover {
color: #ffff;
background: #000EFF;
}
input {
padding: 10px 15px;
background: #0055FF;
border: 1px solid #0000;
color: white;
cursor: pointer;
text-decoration: none;
font-size: 15px;
border-radius:3px;
}
input:hover {
color: #ffff;
background: #000EFF;
}
</style>
<div class="sample-toolbar">
<i class="fa fa-bold fa-fw"></i>old
<i class="fa fa-italic fa-fw"></i>talic
<i class="fa fa-underline"></i> nderline
<i class="fa fa-list fa-fw"></i> List 1
<i class="fa fa-list-ol"></i> List 2
<i class="fa fa-strikethrough"></i> Strikethrough
<i class="fa fa-undo"></i> Undo
<i class="fa fa-redo"></i> Redo
<i class="fas fa-align-left"></i> Align Left
<i class="fas fa-align-center"></i> Align Center
<i class="fas fa-align-right"></i> Align Right
<select id="input-font" class="input" title="Change Font" onchange="changeFont (this);" style= "outline: none;height: 30px;" >
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Sans serif">Sans serif</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Tahoma">Tahoma</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="fontSize" onclick="changeSize()" title= "Change Font Size" style= "outline: none;height: 30px;" >
<option value selected disabled> Change Font Size</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">6</option>
<option value="5">9</option>
<option value="6">10</option>
<option value="7">12</option>
<option value="8">16</option>
</select>
<input draggable="false" type="color" onchange="chooseColor()" id="myColor" value= "text color" title= "Change Text Color">
</div>
<div class="editor" id="sampleeditor">
</div>

for(let i = 0; i < yourCodeOptions.length; i++) {
document.querySelectorAll("yourCodeOptions")[i].addEventListener("mouseover", function()
{
switch(this.id) {case "ul": document.querySelector("button.li").style.display="block"; //li tag should be "display: none;" before this}
}

How to delete a specific sessionStorage value and decrement another sessionStorage value at the same time

I was wondering how can I delete a specific sessionStorage value from the key worker as well as decrement the key limit value by 1 without affecting the other sessionStorage values every time a specific key worker is deleted?
Here is my Jsfiddle https://jsfiddle.net/d7e92k5d/2/
HTML
<ul>
<li>
<div class="worker-container-last">
<label class="worker-label"><input type="text" class="first-name" /></label>
</div>
<div class="worker-container-last">
<label class="worker-label"><input type="text" class="last-name" /></label>
</div>
<div class="worker-container-last">
<label class="worker-label">
<select name="title[]" class="title">
<option value="Select a Title" selected="selected">Select a Title</option>
<option value="Boss">Boss</option>
<option value="Worker">Worker</option>
<option value="Manager">Manager</option>
</select>
</label>
</div>
<div class="add-more"></div>
<div><a class="worker" title="" href="">Add Another Worker</a></div>
</li>
</ul>
JQuery
var worker_record = [];
$(document).ready(function(){
new_worker();
$('.worker').on('click', function(e){
e.preventDefault();
e.stopPropagation();
if(sessionStorage.getItem("limit") === null){
sessionStorage.setItem('limit', 0);
}
if(sessionStorage.getItem('limit') <= 2){
var first_name = $('.first-name').val();
var last_name = $('.last-name').val();
var title = $('.title:first').val();
var tblObj = {first_name: first_name, last_name: last_name, title: title};
worker_record.push(tblObj);
sessionStorage.worker = JSON.stringify(worker_record);
new_worker();
var count = sessionStorage.getItem('limit');
count++;
sessionStorage.setItem('limit', count);
}
});
function new_worker(){
var max_fields = 3;
var x = 0;
if(!(typeof sessionStorage.worker === 'undefined' || sessionStorage.worker.length<1)){
worker_record = JSON.parse(sessionStorage.worker);
}
$('.add-more').empty();
for(var i=0; i<worker_record.length; i++){
if(x < max_fields){
x++;
var first_name = worker_record[i].first_name;
var last_name = worker_record[i].last_name;
var title = worker_record[i].title;
var worker = '<div class="worker-container"><div class="delete-worker"><a title="" href="#">Delete</a></div><div class="update-worker"><a title="" href="#">Update</a></div><div class="worker-box"><label class="another-worker"><input type="text" name="workers_first_name[]" class="first-name" value="' + first_name + '" /></label></div><div class="worker-box"><label class="another-worker"><input type="text" name="workers_last_name[]" class="last-name" value="' + last_name + '" /></label></div><div class="worker-box-last"><label class="another-worker"><select name="workers_title[]" class="title workers-title-options"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select></label></div></div>';
$('.add-more').append(worker);
$('.title:eq('+$('.workers-title-options').length+')').val(title);
}
}
$('.first-name:first').val('');
$('.last-name:first').val('');
$('.title:first').val('Select a Title');
}
$('.add-more').on('click', '.delete-worker', function(e){
e.preventDefault();
e.stopPropagation();
$(this).parent('div').remove();
worker_record = JSON.parse(sessionStorage.worker);
worker_record.splice(worker_record.length -1, 1);
sessionStorage.worker = JSON.stringify(worker_record);
});
});

Jquery add and remove DIV tag row based on select value

I found this great stackoverflow post that does what I need: add and remove rows based on a select value, but the only difference is that in my case, I don't have a table but blocks of divs. In the table example it works fine, but with divs it fails.
I've been using the console to try to fix it to no avail. It seems there are problems with the index value and the increment, but I don't undertand why with a table row works but with divs it doesnot. Could anyone take a look?
Here's a jsfiddle that shows the issue: http://jsfiddle.net/njes3w1a/1/
This is my script:
if ($('#returnRequest').length) {
var row_i = 0;
function emptyRow() {
row_i++;
this.obj = $('<div class="return-row control-group row"></div>');
this.obj.append('<div class="col-md-6"><label class="control-label">Serial number</label><input type="text" class="form-control" value=""/></div><div class="col-md-4"><label class="control-label">Item is</label><select class="form-control"><option value="">Select</option><option value="1">New and unopened</option><option value="2">Defective</option></select></div>');
}
function refresh(new_count) {
//how many applications we have drawed now ?
console.log("New count= " + new_count);
if (new_count > 0) {
$("#noa_header").show();
} else {
$("#noa_header").hide();
}
var old_count = parseInt($('#productRowWrapper').children().length);
console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0) {
console.log('enetered a');
for (var i = 0; i < rows_difference; i++)
$('#productRowWrapper').append((new emptyRow()).obj);
} else if (rows_difference < 0) //we need to remove rows ..
{
console.log('enetered b');
var index_start = old_count + rows_difference + 1;
console.log("Index start= " + index_start);
$('.return-row:gt(' + index_start + ')').remove();
console.log(row_i);
console.log(rows_difference);
row_i += rows_difference;
console.log(row_i);
}
}
$('#quantityReturn').change(function () {
refresh($(this).val());
});
}

I would use this code:
if ($('#returnRequest').length) {
function emptyRow() {
this.obj = $('<div class="return-row control-group row"></div>');
this.obj.append(
'<input type="text" class="form-control" value=""/>' +
'<select class="form-control">' +
'<option value="">Select</option>' +
'<option value="1">New and unopened</option>' +
'<option value="2">Defective</option>' +
'</select>');
}
function refresh(count) {
if (count > 0) {
$("#noa_header").show();
} else {
$("#noa_header").hide();
}
var wrapper = $('#productRowWrapper');
while (wrapper.children().length > count)
wrapper.children().last().remove();
while (wrapper.children().length < count)
wrapper.append((new emptyRow()).obj);
}
$('#quantityReturn').change(function () {
refresh(parseInt($(this).val()));
});
}
It does not introduce unnecessary variables and it a bit shorter. Updated fiddle at http://jsfiddle.net/njes3w1a/6/.

you were calculating your strt index wrong add this
var index_start =old_count- Math.abs(rows_difference)-1 ;
Code
if ($('#returnRequest').length) {
var row_i = 0;
function emptyRow() {
row_i++;
this.obj = $('<div class="return-row control-group row"></div>');
this.obj.append('<input type="text" class="form-control" value=""/><select class="form-control"><option value="">Select</option><option value="1">New and unopened</option><option value="2">Defective</option></select>');
}
function refresh(new_count) {
//how many applications we have drawed now ?
console.log("New count= " + new_count);
if (new_count > 0) {
$("#noa_header").show();
} else {
$("#noa_header").hide();
}
var old_count = parseInt($('#productRowWrapper').children().length);
console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
console.log("Rows diff= " + rows_difference);
//if we have rows to add
if (rows_difference > 0) {
console.log('enetered a');
for (var i = 0; i < rows_difference; i++)
$('#productRowWrapper').append((new emptyRow()).obj);
} else if (rows_difference < 0) //we need to remove rows ..
{
console.log('enetered b');
var index_start =old_count- Math.abs(rows_difference)-1 ;
console.log("Index start= " + index_start);
console.log('.return-row:gt(' + index_start + ')');
$('.return-row:gt(' + index_start + ')').remove();
console.log(row_i);
console.log(rows_difference);
row_i += rows_difference;
console.log(row_i);
}
}
$('#quantityReturn').change(function () {
refresh($(this).val());
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="" id="returnRequest">
<div class="form-group row">
<p class="col-sm-3 control-label">* Quantity to return</p>
<div class="col-sm-9">
<div class="row control-group">
<div class="col-sm-6 control-item" id="signupForename">
<select class="form-control" id="quantityReturn">
<option value="0">Please select</option>
<option value="1">1 item</option>
<option value="2">2 items</option>
<option value="3">3 items</option>
<option value="4">4 items</option>
</select>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="pane-body">
<div class="form-group row">
<div class="col-sm-9">
<div id="noa_header" style="display: none;">Header</div>
<div id="productRowWrapper"></div>
</div>
</div>
</div>
</div>
</div>