document.execCommand("undo", false, null);是什么意思
时间: 2023-02-24 21:34:12 浏览: 429
"document.execCommand("undo", false, null)" 是一个 JavaScript 函数,它的作用是执行“撤销”的命令。这个函数是使用在文档编辑器中,可以回到上一个编辑状态。其中 "undo" 是执行的命令,"false" 是表示命令是否为用户界面显示,"null" 是额外参数,此处没有使用。
相关问题
如何使用execCommand
execCommand 是 JavaScript 中的一个 API,它可以用来操纵浏览器上的富文本编辑器。下面是一些使用 execCommand 的常见方法:
1. 设置文本格式:
```
document.execCommand("bold", false, null);
```
2. 插入链接:
```
document.execCommand("createLink", false, "https://www.example.com");
```
3. 撤销操作:
```
document.execCommand("undo", false, null);
```
注意:execCommand 仅在富文本编辑器环境下有效,如果想要在普通文本框中使用它可能不起作用。
execCommand()所有命令详解及实例展示
`execCommand()` 方法可以执行多种命令,下面是常用的命令、其作用及对应的参数:
- 格式化样式类命令
- `bold`:将选中的文本加粗。
- `italic`:将选中的文本变为斜体。
- `underline`:给选中的文本添加下划线。
- `strikeThrough`:给选中的文本添加删除线。
- `subscript`:将选中的文本变为下标。
- `superscript`:将选中的文本变为上标。
- 对齐方式类命令
- `justifyLeft`:将选中的文本左对齐。
- `justifyCenter`:将选中的文本居中对齐。
- `justifyRight`:将选中的文本右对齐。
- `justifyFull`:将选中的文本两端对齐。
- 列表类命令
- `insertOrderedList`:插入有序列表。
- `insertUnorderedList`:插入无序列表。
- 插入类命令
- `createLink`:创建一个链接。
- `unlink`:移除一个链接。
- `insertImage`:插入一个图片。
- 撤销、恢复类命令
- `undo`:撤销上一次操作。
- `redo`:恢复上一次操作。
下面是一个实现了上述所有命令的文本编辑器示例代码:
```html
<textarea id="editor"></textarea>
<button onclick="bold()">加粗</button>
<button onclick="italic()">斜体</button>
<button onclick="underline()">下划线</button>
<button onclick="strikeThrough()">删除线</button>
<button onclick="subscript()">下标</button>
<button onclick="superscript()">上标</button>
<button onclick="justifyLeft()">左对齐</button>
<button onclick="justifyCenter()">居中对齐</button>
<button onclick="justifyRight()">右对齐</button>
<button onclick="justifyFull()">两端对齐</button>
<button onclick="insertOrderedList()">有序列表</button>
<button onclick="insertUnorderedList()">无序列表</button>
<input type="text" placeholder="请输入链接地址" id="linkUrl">
<button onclick="createLink()">插入链接</button>
<button onclick="unlink()">移除链接</button>
<input type="text" placeholder="请输入图片地址" id="imageUrl">
<button onclick="insertImage()">插入图片</button>
<button onclick="undo()">撤销</button>
<button onclick="redo()">恢复</button>
<script>
const editor = document.getElementById('editor');
const linkUrl = document.getElementById('linkUrl');
const imageUrl = document.getElementById('imageUrl');
function bold() {
document.execCommand('bold', false, null);
}
function italic() {
document.execCommand('italic', false, null);
}
function underline() {
document.execCommand('underline', false, null);
}
function strikeThrough() {
document.execCommand('strikeThrough', false, null);
}
function subscript() {
document.execCommand('subscript', false, null);
}
function superscript() {
document.execCommand('superscript', false, null);
}
function justifyLeft() {
document.execCommand('justifyLeft', false, null);
}
function justifyCenter() {
document.execCommand('justifyCenter', false, null);
}
function justifyRight() {
document.execCommand('justifyRight', false, null);
}
function justifyFull() {
document.execCommand('justifyFull', false, null);
}
function insertOrderedList() {
document.execCommand('insertOrderedList', false, null);
}
function insertUnorderedList() {
document.execCommand('insertUnorderedList', false, null);
}
function createLink() {
const url = linkUrl.value;
document.execCommand('createLink', false, url);
}
function unlink() {
document.execCommand('unlink', false, null);
}
function insertImage() {
const url = imageUrl.value;
document.execCommand('insertImage', false, url);
}
function undo() {
document.execCommand('undo', false, null);
}
function redo() {
document.execCommand('redo', false, null);
}
</script>
```
以上是常用的 `execCommand()` 命令及其作用。根据具体需求,我们可以选择合适的命令来实现文本编辑器中的各种功能。
阅读全文