文章/答案/技术大牛

发布

社区首页 >问答首页 >execCommand航向不工作

问execCommand航向不工作
EN

Stack Overflow用户

提问于 2017-11-09 22:58:26

回答 1查看 1.6K关注 0票数 1

正如标题所解释的，由于某种原因，document.execCommand('heading', false, 'h1') (或任何其他标题大小)无法工作。但是，其他命令，如'bold'、'link'等，都是有用的。

我正在研究犬科，它似乎得到了全面的支持，而"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;
}

javascript

html

rich-text-editor

execcommand

回答 1

Stack Overflow用户

发布于 2017-11-10 04:37:50

你做了一个错误的假设。caniuse站点声明支持execCommand没有问题，这是正确的，，但这并不意味着所有命令都支持。实际上，caniuse页面在Notes部分有一个注释：

若要确定支持哪些命令，请参见Document.queryCommandSupported()

如果你选中“标题”，你会发现它在Chrome中不受支持：

console.log(document.queryCommandSupported("heading"))

IE也不支持它。Firefox声明它支持它，但它可能以您预期的方式出现，也可能没有:它不是将标题样式仅应用于选定的文本，而是将其应用于整个块(它的工作方式类似于"formatBlock“，因为标题是块级元素，而不是粗体/斜体的内联元素)。

如果这对你有用，有一个解决办法是使用"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> (它将在边缘上工作，但在Internet上不起作用)。就像这样：

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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47213023

复制

相似问题

问execCommand航向不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问execCommand航向不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问execCommand航向不工作
EN