A small functionality that allows you to change the color of a HTML
specific word, but currently it only applies a single color and there is a small stuck of the cursor at the moment of writing it does not flow normally, I think that it is possible to avoid creating so many case
, if some words HTML
are going to have the same color, I think you can change for another alternative, to say
[P,DIV,SPAN,FONT];
Those words will have a colortomate
And so go playing with assignable colors by saying the following:
[BR,H1,H2,H3];
Apply an orange color.
How to make the color change functionality work properly?
$("#editor").on("keydown keyup", function(e){
if (e.keyCode == 32){
var text = $(this).text().replace(/[\s]+/g, " ").trim();
var word = text.split(" ");
var newHTML = "";
$.each(word, function(index, value){
switch(value.toUpperCase()){
case "DIV":
case "SPAN":
case "P":
newHTML += "<span class='statement'>" + value + " </span>";
break;
default:
newHTML += "<span class='other'>" + value + " </span>";
}
});
$(this).html(newHTML);
}
});
#editor {
width: 400px;
height: 100px;
padding: 10px;
background-color: #444;
color: white;
font-size: 14px;
font-family: monospace;
}
.statement {
color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor" contenteditable="true"></div>