在 Angular 中使用 execCommand 进行格式化

Question

我有这个代码：

  @HostListener('document:click', ['$event'])
  onClick(targetElement) {
    console.log(targetElement);
    var command = 'bold';
    if (command == 'h1' || command == 'h2' || command == 'p') {
      document.execCommand('formatBlock', false, command);
    } else document.execCommand(targetElement.data('command'), false, null);
  });

但这不起作用。第一个 if 语句将被跳过，因为我只想确保 execCommand 正常工作。

它确实打印出 console.log 所以它进入那个函数。

要修改的HTML元素是：

<div id='editor' contenteditable>
  <h1>A WYSIWYG Editor.</h1>
  <p>Change this text, or format</p>
</div>

如何将选定的文本更改为粗体？如何在 Typescript 中使用 document.execCommand？

我在这部分有一种感觉，document.execCommand(targetElement 我应该将 ID 为 editor 的 div 传递给指令，这样它就知道该特定按钮应该执行什么操作.

Answer 1

我想你的 document 对象上有 data。

无论如何，您正在将 $event 传递到 HostListener。这将使 targetElement 成为 MouseEvent 而不是 HTMLElement。您可以使用类型提示来预见此类错误。

另一方面，您正在使用我从未听说过的 data 函数。不在 MouseEvent 上，也不在 HTMLElement 或 Document 上。我的猜测是您正在尝试访问 dataset？如果是这样，这可能对您有用：

@HostListener('document:click', ['$event.target'])
  onClick(targetElement: Document) {
    let command: string = 'bold';
    if (command === 'h1' || command === 'h2' || command === 'p') {
       document.execCommand('formatBlock', false, command);
    } else {
       document.execCommand(targetElement.dataset['command'], false, null);
    }
}

在 Angular 中使用 execCommand 进行格式化

Using execCommand for formatting in Angular

wysiwyg

typescript

angular