Question

我想创建一个非常简单的HTML工具栏，可以使用粗体，斜体和下划线，这样当用户在html页面中选择一个可以更改默认文本的内容可编辑区域时。在互联网上做了大量的工作，但我能找到的只有jquery的百万行代码，我真的不想使用它们，因为很多代码都是多余的。

任何人都知道代码/知道我在哪里可以获得简短而又可爱的代码

由于

Answer 1

可以使用addClass＆amp ;; jquery完成removeClass方法
这样的事情就是你需要的所有代码：
$( *YourTextElement* ).addClass( "YourCssDefinition" );
这当然只会影响定义的 YourTextElement 中的整个文本
....

Answer 2

下面是ContentEditable的最简单示例。有关文档，请参阅https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contenteditable simplest sample</title>
</head>
<body>

<button id="bold">b</button>
<button id="italic">i</button>
<button id="underline">u</button>
<div contenteditable="true">
Textinput here
</div>

<script>

document.getElementById("bold").onclick = function(e) {
 document.execCommand("bold", false, "");
};

document.getElementById("italic").onclick = function(e) {
 document.execCommand("italic", false, "");
};

document.getElementById("underline").onclick = function(e) {
 document.execCommand("underline", false, "");
};

</script>
</body>
</html>

问候

阿克塞尔

HTML文本编辑器 - 简单代码

2 个答案: