三月份了,广州的春天也到了,白昼也正在努力向着夜晚扩张,夜晚六点多也可以看到鱼肚白了
常用的富文本中,常常可以看到斜体/粗体的切换。比如下方
这是一个在富文本编译器中很常见的功能,即使此时的我,用着csdn的时候,也可以看到这个功能
需要解析这个功能,需要使用到一个api。
documnet.execommand
接下来是使用它作为一个简单的例子。比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input value="input输入框的文本" />
<div>普通的div中的文本</div>
<div contenteditable="true">contenteditable的div中的文字</div>
<textarea>测试的文字</textarea>
</body>
<script>
setTimeout(() => {
console.log("3s已到了")
document.execCommand("bold", false);
}, 3000);
</script>
</html>
一个很简单的demo,无非就是展示了四个组件,以及一个定时器。用于让大家校验下如何使用这个api,当刷新后,在三秒内,我们各自选中四个元素的文本,以及最后ctrl+a选择全部,可以查看出哪个才会变化。所以就不多描述了。
注意!!
使用这个api的时候,必须要知道它的兼容性,以及在ie下的问题,比如文本会用别的替换,而不是用b代替粗体,所以如果不是万不得已,建议使用富文本
也没啥可以说的了。算是书承上回了