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>
For this case, it could use
arrays
elements that containtags
which it will evaluate to apply a certain color. and use includes() to find out if the current element exists in the previously declared array.In addition, a function would be needed to manipulate the
focus
contenteditable, using Ranges (function commented in the code)Your code with the mentioned modifications
It will work, but the process is not optimal as it is processing all the content again every time the space key is pressed. For which it would be advisable not to touch the already processed components and only work on the current one. For this we would use the function
split
through the entity
(the insertion of this entity in the if else would be modified)Possible code explained (To Improve)
The problem you are experiencing is due to the regeneration of the HTML
<div>
that causes the cursor (or selection) to be reset.It is a very complex topic and the code could be enormously complicated to correctly manage the entire hierarchy of children in a
<div>
complex, but having a single level the code can be slightly simplified.Here you can see an example of how to get the start of the selection (I always assume a static cursor with no selection) before and after modifying the content to keep the cursor position virtually in the same place:
I would recommend ( as I did in a previous question ) to use a function library that allows you to customize patterns like Ace :
Due to your level of demand, perhaps you should look for a more "sophisticated" javascript library that fulfills the functions of "editor" or that at least performs the coloring of keywords in real time (because there are some but only in preloaded paragraphs). For example Ace . Here is a very basic example applying the editor, which I transcribe below:
On the other hand, there are also simpler codes like this . In the latter case, the words to be highlighted must be encoded and the color/tag returned in each case (while in the case of a bookstore/publisher they already have predefined languages, visual themes, etc.)