上一篇
HTML中，可使用
contenteditable属性结合简化的CSS和JavaScript来实现简易工具
HTML中创建简化工具栏的编辑器,可以通过结合HTML、CSS和JavaScript来实现，以下是一个详细的指南，介绍如何创建一个具有简化工具栏的HTML编辑器：
基本结构
我们需要创建一个基本的HTML结构,包括一个文本区域（<textarea>）用于输入内容，以及一个工具栏区域用于放置编辑按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Simplified HTML Editor</title>
<style>
/ 样式部分 /
#toolbar {
margin-bottom: 10px;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<div id="toolbar">
<button onclick="execCmd('bold')">Bold</button>
<button onclick="execCmd('italic')">Italic</button>
<button onclick="execCmd('underline')">Underline</button>
<button onclick="execCmd('insertUnorderedList')">Bullet List</button>
<button onclick="execCmd('insertOrderedList')">Numbered List</button>
<button onclick="execCmd('justifyCenter')">Center</button>
<button onclick="execCmd('insertImage', prompt('Enter image URL'))">Insert Image</button>
</div>
<div id="editor" contenteditable="true"></div>
<script>
// 脚本部分
function execCmd(command, value) {
document.execCommand(command, false, value);
}
</script>
</body>
</html>
详细解释
-
HTML结构：
#toolbar：这是一个包含多个按钮的容器，每个按钮对应一个编辑命令。#editor：这是一个可编辑的<div>元素，用户可以在其中输入和编辑内容。contenteditable="true"属性使其成为可编辑区域。
-
CSS样式：
简单的样式用于美化工具栏和编辑器区域,你可以根据需要进一步自定义样式。
-
JavaScript功能：
execCmd函数：这个函数使用document.execCommand方法来执行各种编辑命令，当用户点击“Bold”按钮时，execCmd('bold')会被调用，使选中的文本变为粗体。prompt函数：在插入图片时，我们使用prompt函数让用户输入图片的URL，你也可以将其替换为更复杂的文件选择对话框或其他输入方式。
扩展功能
你可以根据需要添加更多的按钮和功能,以下是一些常见的编辑命令及其对应的document.execCommand方法：
| 按钮名称 | 命令 | 说明 |
|---|---|---|
| Bold | bold |
加粗选中的文本 |
| Italic | italic |
将选中的文本变为斜体 |
| Underline | underline |
给选中的文本添加下划线 |
| Strikethrough | strikeThrough |
给选中的文本添加删除线 |
| Undo | undo |
撤销上一步操作 |
| Redo | redo |
重做上一步操作 |
| Insert Link | createLink |
插入超链接 |
| Unlink | unlink |
移除超链接 |
| Insert Image | insertImage |
插入图片 |
| Indent | indent |
增加缩进 |
| Outdent | outdent |
减少缩进 |
| Justify Left | justifyLeft |
左对齐 |
| Justify Center | justifyCenter |
居中对齐 |
| Justify Right | justifyRight |
右对齐 |
| Justify Full | justifyFull |
两端对齐 |
| Subscript | subscript |
下标 |
| Superscript | superscript |
上标 |
| Insert Ordered List | insertOrderedList |
插入有序列表 |
| Insert Unordered List | insertUnorderedList |
插入无序列表 |
| Format Block | formatBlock |
设置段落格式（如标题、段落等） |
安全性考虑
-
防止XSS攻击：当允许用户输入HTML内容时，必须确保这些内容不会被反面利用来执行跨站脚本攻击（XSS），你可以使用库如DOMPurify来清理用户输入的内容。
-
限制可执行的命令：只允许用户执行安全的命令，避免使用可能引发安全问题的命令。
示例代码扩展
以下是一个扩展后的示例,包含了更多的编辑按钮和一些基本的安全性措施：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Simplified HTML Editor</title>
<style>
/ 样式部分 /
#toolbar {
margin-bottom: 10px;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
</style>
</head>
<body>
<div id="toolbar">
<button onclick="execCmd('bold')">Bold</button>
<button onclick="execCmd('italic')">Italic</button>
<button onclick="execCmd('underline')">Underline</button>
<button onclick="execCmd('strikeThrough')">Strikethrough</button>
<button onclick="execCmd('justifyLeft')">Left Align</button>
<button onclick="execCmd('justifyCenter')">Center</button>
<button onclick="execCmd('justifyRight')">Right Align</button>
<button onclick="execCmd('insertUnorderedList')">Bullet List</button>
<button onclick="execCmd('insertOrderedList')">Numbered List</button>
<button onclick="execCmd('createLink', prompt('Enter URL'))">Insert Link</button>
<button onclick="execCmd('unlink')">Unlink</button>
<button onclick="execCmd('insertImage', prompt('Enter image URL'))">Insert Image</button>
<button onclick="execCmd('undo')">Undo</button>
<button onclick="execCmd('redo')">Redo</button>
</div>
<div id="editor" contenteditable="true"></div>
<script>
// 脚本部分
function execCmd(command, value) {
document.execCommand(command, false, value);
}
</script>
</body>
</html>
通过上述步骤,你可以创建一个简单的HTML编辑器，具有基本的工具栏按钮来执行常见的文本编辑操作，你可以根据需要进一步扩展和自定义这个编辑器，添加更多的功能和样式，务必注意安全性问题，确保用户输入的内容
