一个小功能,可让您更改HTML
特定单词的颜色,但目前它仅适用于单一颜色,并且在编写时有一个小光标卡住它不能正常流动,我认为可以避免创建这么多case
,如果某些单词HTML
将具有相同的颜色,我认为您可以更改为另一种选择,比如说
[P,DIV,SPAN,FONT];
那些话会有颜色tomate
因此,通过说以下内容来玩可分配的颜色:
[BR,H1,H2,H3];
涂上橙色。
如何使颜色更改功能正常工作?
$("#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>
对于这种情况,它可以使用
arrays
包含tags
它将评估的元素来应用某种颜色。并使用includes()找出当前元素是否存在于先前声明的数组中。此外,还需要一个函数来
focus
使用 Ranges (代码中注释的函数)来操作 contenteditable您的代码具有上述修改
它会起作用,但该过程不是最佳的,因为每次按下空格键时它都会再次处理所有内容。为此,建议不要触摸已处理的组件,而仅处理当前的组件。为此,我们将
split
通过实体使用该函数
(在 if else 中插入该实体将被修改)可能的代码解释(改进)
您遇到的问题是由于 HTML 的重新生成
<div>
导致光标(或选择)被重置。这是一个非常复杂的主题,代码可能非常复杂,以正确管理复杂的子级的整个层次结构
<div>
,但是只有一个级别,代码可以稍微简化。在这里,您可以看到一个示例,说明如何在修改内容之前和之后开始选择(我总是假设一个没有选择的静态光标)以保持光标位置几乎在同一个位置:
我建议(就像我在上一个问题中所做的那样)使用允许您自定义 Ace 等模式的函数库:
由于您的需求水平,也许您应该寻找一个更“复杂”的 javascript 库,它可以实现“编辑器”的功能,或者至少实时执行关键字的着色(因为有一些但仅在预加载的段落中) . 例如王牌。这是应用编辑器的一个非常基本的示例,我将其转录如下:
另一方面,也有像这样更简单的代码。在后一种情况下,必须对要突出显示的单词进行编码,并在每种情况下返回颜色/标签(而对于书店/出版商,它们已经具有预定义的语言、视觉主题等)