Question

我正在尝试创建一个WYSIWYG编辑器，我已经完成了：

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>

这是我的错误：

TypeError: Cannot read property 'document' of undefined
    at WysiwygEditorComponent.iBold

如何获取html元素以便我可以调用execCommand，因此可以根据调用的函数进行更改？

Answer 1

问题是execCommand不是html对象的一部分，而是文档对象，因此错误指的是HTML元素。该文档必须首先位于designMode，然后公开此功能。

所以，这就是问题界限：

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

更改为

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

这解决了这个问题。

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

在Angular 2应用程序中使用execCommand

1 个答案: