Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 第二次单击后删除格式_Javascript_Html_Format_Contenteditable_Execcommand - Fatal编程技术网

Javascript 第二次单击后删除格式

Javascript 第二次单击后删除格式,javascript,html,format,contenteditable,execcommand,Javascript,Html,Format,Contenteditable,Execcommand,我正在用原始JavaScript构建一个小的文本编辑器。我有三个按钮:粗体、草书和标题。当我点击两次粗体和草书按钮时,它消失了,但当我点击两次标题按钮时,什么也没发生。我试着使用真/假,但不能多次格式化文本 我使用execcommandapi和ContentEditable属性构成我的div clicked=false; cmd=(cmd,arg)=>{ 单击=真; document.execCommand(cmd、false、arg); 如果(单击&&cmd==='heading'){ do

我正在用原始JavaScript构建一个小的文本编辑器。我有三个按钮:粗体、草书和标题。当我点击两次粗体和草书按钮时,它消失了,但当我点击两次标题按钮时,什么也没发生。我试着使用真/假,但不能多次格式化文本

我使用execcommandapi和ContentEditable属性构成我的div

clicked=false;
cmd=(cmd,arg)=>{
单击=真;
document.execCommand(cmd、false、arg);
如果(单击&&cmd==='heading'){
document.execCommand('undo')
}
单击=假;
警报(单击);
}
#工具栏{
文本对齐:居中;
底部边框:3倍纯黑;
}
钮扣{
垂直对齐:中间对齐;
显示:内联块;
字体大小:35px;
边界半径:7px;
边框样式:无;
边框:2件纯黑;
高度:50px;
宽度:50px;
利润率:15px;
背景色:白色;
过渡:0.5s;
}
按钮:悬停{
背景:浅灰色;
}
身体{
保证金:0;
字体系列:格鲁吉亚;
宽度:100%;
}
div[contenteditable=true]{
高度:10公分;
宽度:自动;
垂直对齐:中间对齐;
填充:25px;
字体大小:25px;
单词包装:打断单词;
大纲:无;
}
h1{
字体大小:30px;
}

B
我
T
Lorem ipsum dolor sit amet,奉献精英。质量意识,即人的自然状态和智慧水平。
您应该在第二个单击处理程序中使用undo(或removeFormat,如果可以的话)

这里是关于

据我所知,formatBlock替换它在文本中找到的第一个块元素。因此,如果有一个包装文本的div,它将变成一个p,但是在下一次单击时,您已经有了一个p,因此p将被另一个p替换

clicked=false;
cmd=(cmd,arg)=>{
如果(单击&&cmd==='formatBlock'){
document.execCommand('formatBlock',false,'p');
}否则{
document.execCommand(cmd、false、arg);
}
点击=!点击;
}
#工具栏{
文本对齐:居中;
底部边框:3倍纯黑;
}
钮扣{
垂直对齐:中间对齐;
显示:内联块;
字体大小:35px;
边界半径:7px;
边框样式:无;
边框:2件纯黑;
高度:50px;
宽度:50px;
利润率:15px;
背景色:白色;
过渡:0.5s;
}
按钮:悬停{
背景:浅灰色;
}
身体{
保证金:0;
字体系列:格鲁吉亚;
宽度:100%;
}
div[contenteditable=true]{
高度:10公分;
宽度:自动;
垂直对齐:中间对齐;
填充:25px;
字体大小:25px;
单词包装:打断单词;
大纲:无;
}
h1{
字体大小:30px;
}
p{
颜色:红色;
}

B
我
T
Lorem ipsum dolor sit amet,奉献精英。质量意识,即人的自然状态和智慧水平

您应该在第二个单击处理程序中使用undo(或removeFormat,如果可以的话)

这里是关于

据我所知,formatBlock替换它在文本中找到的第一个块元素。因此,如果有一个包装文本的div,它将变成一个p,但是在下一次单击时,您已经有了一个p,因此p将被另一个p替换

clicked=false;
cmd=(cmd,arg)=>{
如果(单击&&cmd==='formatBlock'){
document.execCommand('formatBlock',false,'p');
}否则{
document.execCommand(cmd、false、arg);
}
点击=!点击;
}
#工具栏{
文本对齐:居中;
底部边框:3倍纯黑;
}
钮扣{
垂直对齐:中间对齐;
显示:内联块;
字体大小:35px;
边界半径:7px;
边框样式:无;
边框:2件纯黑;
高度:50px;
宽度:50px;
利润率:15px;
背景色:白色;
过渡:0.5s;
}
按钮:悬停{
背景:浅灰色;
}
身体{
保证金:0;
字体系列:格鲁吉亚;
宽度:100%;
}
div[contenteditable=true]{
高度:10公分;
宽度:自动;
垂直对齐:中间对齐;
填充:25px;
字体大小:25px;
单词包装:打断单词;
大纲:无;
}
h1{
字体大小:30px;
}
p{
颜色:红色;
}

B
我
T
Lorem ipsum dolor sit amet,奉献精英。质量意识,即人的自然状态和智慧水平


是的,但我仍然不知道如何让它成为现实。我的意思是,这东西不太管用。是的,但我仍然不知道如何把它变成现实。我是说,这东西也不管用。