- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
正如标题所解释的,由于某种原因 document.execCommand('heading', false, 'h1')
(或任何其他标题大小)不起作用。但是,其他命令(例如 'bold'
、'link'
等)可以工作。
我正在看caniuse尽管存在“0 个已知问题”,但它似乎得到了全面支持。
下面是我正在使用的代码。值得注意的是,我尝试嵌入一个演示,甚至创建一个代码笔,但由于某种原因,这些命令都不起作用。
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function(){
document.designMode = 'on'
document.execCommand('heading', false, 'h1') // does not work
document.execCommand('bold', false, null) // will work
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++){
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
知道发生了什么吗?
附注下面是 HTML 和 CSS,以防您想在浏览器中使用它们。
<!DOCTYPE html>
<head>
<title>Is required and cannot be empty.</title>
<meta charset="UTF-8">\
<link rel="stylesheet" href="css/write.css">
</head>
<body>
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div> <!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div> <!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div> <!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
Not only is the photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine who was also unhappy with his picture.
Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately.
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
<script src="js/write.js"></script>
</body>
</html>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing:border-box;
border:solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing:border-box;
border:solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing:border-box;
border:solid black 1px;
}
最佳答案
你做出了错误的假设。 caniuse 网站指出 execCommand
没有问题地受到支持,这是正确的,但这并不意味着所有命令都受支持。事实上,caniuse page注释部分有评论:
To determine what commands are supported, see
Document.queryCommandSupported()
如果您检查“标题”,您会发现 Chrome 不支持它:
console.log(document.queryCommandSupported("heading"))
IE 也不支持。 Firefox 声明它支持它,但它可能会或可能不会按照您期望的方式:它不是将标题样式仅应用于选定的文本,而是将其应用于整个 block (就像“formatBlock”一样,其意义在于标题是 block 级元素,而不是像粗体/斜体那样的内联元素)。
如果这对您有用,有一个解决方法是使用“formatBlock”,因为它受 Chrome、Firefox 和 IE 支持:
console.log(document.queryCommandSupported("formatBlock"))
在这种情况下,您要做的就是将 formatBlock 设置为您想要的标题(看起来像 h1
),它将起作用:
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function() {
document.designMode = 'on'
document.execCommand('formatBlock', false, 'h1')
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++) {
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
border: solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
border: solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing: border-box;
border: solid black 1px;
}
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div>
<!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div>
<!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div>
<!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf
organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the
photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference
had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine
who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers
had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees,
this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift
could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
现在,如果您只想将您选择的文本作为 H1,那么您可以使用一个技巧:使用“insertHTML”添加标签 <h1>
和</h1>
包围所选文本(它适用于 Edge,但不适用于 Internet Explorer)。像这样的事情:
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function() {
document.designMode = 'on'
document.execCommand('insertHTML', false, '<h1>' + window.getSelection().toString() + '</h1>')
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++) {
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
border: solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
border: solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing: border-box;
border: solid black 1px;
}
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div>
<!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div>
<!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div>
<!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf
organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the
photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference
had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine
who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers
had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees,
this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift
could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
关于javascript - execCommand 标题不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47213023/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!