Javascript 在Angular 2应用程序中使用execCommand

我正在尝试创建所见即所得编辑器，我已经完成了：

export class WysiwygEditorComponent extends OnInit {
  editor:any;
  ngOnInit() {
    this.editor = document.getElementById('editor')
  }
  iBold() {
    this.editor.execCommand('bold', false, null);
  }
}

这是它的HTML：

<div>
  <input type="button" (click)="iBold()" value="B">
</div>
<div id='editor' contenteditable>
  <h1>A WYSIWYG Editor.</h1>
  <p>Try making some changes here. Add your own text.</p>
</div>

---

如何获取html元素，以便调用

execCommand

，从而根据调用的函数进行更改？

问题在于

execCommand

不是html对象的一部分，而是文档对象，因此错误指的是html元素。文档必须首先处于

设计模式

，然后才能显示此功能

这就是问题所在：

this.editor.execCommand('bold', false, null);

改为

document.execCommand('bold', false, null);

这就解决了问题

---

有关更多信息，尤其是所有可能的命令，请查看页面。

我对

execCommand

不太熟悉，但根据我有限的研究，它似乎是

文档上的一种方法，而不是HTML元素
所见即所得组件的选择器是什么？@snorkpete-非常感谢。我以前犯过错误，并没有重新使用文档，但仅仅是一次更改就修复了它。如果你把你的评论作为答案，我会接受。如果你有答案，就把它作为答案发布，而不是作为你问题的一部分。虽然这个代码片段可以解决问题，但确实有助于提高你文章的质量。请记住，您是在为将来的读者回答这个问题，而这些人可能不知道您的代码建议的原因。我的意思是，我知道这是您自己的问题，但为了子孙后代的利益考虑…；-）现在看起来好多了！向上投票。非常感谢。
document.execCommand('bold', false, null);