Angular项目中TinyMCE工具栏位置配置报错求助

在Angular项目中使用@tinymce/tinymce-angular": "^7.0.0"完成自托管集成后，尝试通过toolbar_location: 'bottom'将工具栏移到编辑器底部时，会触发TypeScript编译错误，错误提示为：

Type 'string' is not assignable to type 'ToolbarLocation | undefined'

问题原因 #

这个版本的TinyMCE Angular封装中，RawEditorOptions接口里的toolbar_location属性对应的是**ToolbarLocation枚举类型**，而非字符串类型，直接传入字符串字面量会不符合TS的类型校验规则。

解决办法 #

方法1：使用官方提供的枚举值（推荐）

先从包中导入ToolbarLocation枚举，然后用枚举常量替代字符串：

import { Component, OnInit } from '@angular/core';
// 导入ToolbarLocation枚举
import { ToolbarLocation } from '@tinymce/tinymce-angular';

export class TextEditorComponent implements OnInit {

  public DescriptionTextEditor = {
    base_url: '/tinymce',
    suffix: '.min',
    menubar: false,
    statusbar: false,
    plugins: 'link lists',
    toolbar: 'bold italic underline | bullist | link | removeformat',
    // 使用枚举值
    toolbar_location: ToolbarLocation.Bottom
  };

  constructor() { }

  ngOnInit(): void {
  }
}

方法2：类型断言绕过校验（适用于不想导入枚举的场景）

给toolbar_location的值添加类型断言，告诉TS这个字符串符合ToolbarLocation类型：

import { Component, OnInit } from '@angular/core';
import { ToolbarLocation } from '@tinymce/tinymce-angular';

export class TextEditorComponent implements OnInit {

  public DescriptionTextEditor = {
    base_url: '/tinymce',
    suffix: '.min',
    menubar: false,
    statusbar: false,
    plugins: 'link lists',
    toolbar: 'bold italic underline | bullist | link | removeformat',
    // 添加类型断言
    toolbar_location: 'bottom' as ToolbarLocation
  };

  constructor() { }

  ngOnInit(): void {
  }
}

修改后重新编译项目，错误会消失，工具栏会正常显示在编辑器底部。

内容的提问来源于stack exchange，提问作者rrrrrauno