javascript - 第二次点击后删除格式
问题描述
我正在用原始 JavaScript 构建一个小型文本编辑器。我有三个按钮:粗体、草书和标题。当我在粗体和草书按钮上单击两次时,它会消失,但是当我在标题按钮上单击两次时,什么也没有发生。我尝试使用真/假,但它不能多次格式化文本。
我在我的 div 中使用 ExecCommand API 和 ContentEditable 属性。
clicked = false;
cmd = (cmd, arg) => {
clicked = true;
document.execCommand(cmd, false, arg);
if(clicked && cmd === 'heading'){
document.execCommand('undo')
}
clicked = false;
alert(clicked);
}
#toolbar {
text-align: center;
border-bottom: 3px solid black;
}
button {
vertical-align: middle;
display: inline-block;
font-size: 35px;
border-radius: 7px;
border-style: none;
border: 2px solid black;
height: 50px;
width: 50px;
margin: 15px;
background-color: white;
transition: 0.5s;
}
button:hover {
background: lightgrey;
}
body {
margin: 0;
font-family: Georgia;
width: 100%;
}
div[contenteditable=true] {
height: 10em;
width: auto;
vertical-align: middle;
padding: 25px;
font-size: 25px;
word-wrap: break-word;
outline: none;
}
h1 {
font-size: 30px;
}
<nav id="toolbar">
<button onclick="cmd('bold')">B</button>
<button onclick="cmd('italic')">i</button>
<button onclick="cmd('formatBlock','<h1>')">T</button>
</nav>
<div contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur quaerat, natus nobis cum ut rerum obcaecati reiciendis beatae sapiente vel.
</div>
解决方案
您应该在第二个单击处理程序中使用撤消(或 removeFormat,如果它有效)。
此处获取有关execCommand的信息
据我所知, formatBlock 替换了它在文本周围找到的第一个块元素。因此,如果您有一个包含文本的 div,它将变为 ap,但是在下一次单击时,您已经有了 ap,因此 p 被另一个 p 替换
clicked = false;
cmd = (cmd, arg) => {
if(clicked && cmd === 'formatBlock'){
document.execCommand('formatBlock', false, 'p');
} else {
document.execCommand(cmd, false, arg);
}
clicked = !clicked;
}
#toolbar {
text-align: center;
border-bottom: 3px solid black;
}
button {
vertical-align: middle;
display: inline-block;
font-size: 35px;
border-radius: 7px;
border-style: none;
border: 2px solid black;
height: 50px;
width: 50px;
margin: 15px;
background-color: white;
transition: 0.5s;
}
button:hover {
background: lightgrey;
}
body {
margin: 0;
font-family: Georgia;
width: 100%;
}
div[contenteditable=true] {
height: 10em;
width: auto;
vertical-align: middle;
padding: 25px;
font-size: 25px;
word-wrap: break-word;
outline: none;
}
h1 {
font-size: 30px;
}
p {
color: red;
}
<nav id="toolbar">
<button onclick="cmd('bold')">B</button>
<button onclick="cmd('italic')">i</button>
<button onclick="cmd('formatBlock','<h1>')">T</button>
</nav>
<div contenteditable="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur quaerat, natus nobis cum ut rerum obcaecati reiciendis beatae sapiente vel.</p>
</div>
看看我的片段,问题不在命令中。如果用户单击 formatBlock,您的代码将执行两次所选命令。为了测试它,我添加了一个
用红色围绕文本。然后在 formatBlock 上,我将该块转换为 ; 在第二次单击时,它将恢复为
.
推荐阅读
- php - php-fpm 登录 kubernetes pod 因 500 个错误而丢失
- docker - 如何使用 forge 用户将 ray 连接到 laravelsai docker 容器?
- swift - Swift - iOS - 将字符串转换为日期和问题
- python - 随机森林分类器 sklearn - 在真实数据上返回可怕的结果
- javascript - 计算百分比剩余百分比
- python-3.x - 如何根据用户输入动态调用不同的函数
- android - frida hook 原生非导出函数
- python - 如何通过 Heroku 上的 python 代码更新环境变量?
- podman - 更改现有 podman 网络子网的正确方法
- desktop-application - 使用 WinAppDriver 自动执行 Windows 应用程序安装过程时显示未知错误