execCommand()命令详解及实例展示
时间: 2023-10-08 15:12:16 浏览: 52
`execCommand()` 是 JavaScript 中一个比较常用的方法,它可以对当前文档进行操作,比如实现文本样式的改变、插入图片等。下面是 `execCommand()` 的详细解释及实例展示:
### `execCommand()` 方法
语法:`document.execCommand(command, showUI, value)`
参数:
- `command`:表示要执行的命令。常用命令有:`bold`(加粗)、`italic`(斜体)、`underline`(下划线)、`insertImage`(插入图片)等。
- `showUI`:可选参数,表示是否显示用户界面,一般传入 false。
- `value`:可选参数,表示执行命令需要的值,比如插入图片需要传入图片的 URL。
返回值:执行命令的返回值。一般情况下我们不需要关注它。
### 实例展示
下面是一个简单的文本编辑器实现,包括加粗、斜体、下划线、插入图片等功能:
```html
<textarea id="editor"></textarea>
<button onclick="bold()">加粗</button>
<button onclick="italic()">斜体</button>
<button onclick="underline()">下划线</button>
<input type="text" placeholder="请输入图片地址" id="imageUrl">
<button onclick="insertImage()">插入图片</button>
<script>
const editor = document.getElementById('editor');
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 insertImage() {
const url = imageUrl.value;
document.execCommand('insertImage', false, url);
}
</script>
```
当我们在文本框中输入一些内容后,点击不同的按钮即可实现对文本的样式改变和图片的插入。