Angular 16集成TinyMCE无法禁用编辑器问题求助

1. 确认组件版本兼容性 #

Angular 16 需要搭配对应版本的 @tinymce/tinymce-angular 组件，推荐安装7.x版本：

npm install @tinymce/tinymce-angular@^7.0.0

2. 结合组件API与编辑器实例设置禁用 #

单独使用[disabled]属性或init里的readonly配置可能因为初始化时机问题失效，建议结合编辑器实例调用官方API：

代码示例 #

HTML部分

<editor
  #tinyEditor
  [init]="editorOptions"
  [disabled]="isEditorDisabled"
></editor>

TypeScript部分

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Editor } from '@tinymce/tinymce-angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('tinyEditor') tinyEditor!: Editor;
  isEditorDisabled = true;

  public editorOptions: Object = {
    base_url: '/tinymce', 
    suffix: '.min',             
    toolbar: '',
    menubar: '',
    statusbar: false
  };

  ngAfterViewInit(): void {
    // 编辑器初始化完成后，强制设置只读模式
    if (this.isEditorDisabled && this.tinyEditor.editor) {
      this.tinyEditor.editor.setMode('readonly');
    }
  }

  // 可选：动态切换禁用状态的方法
  toggleEditorState(): void {
    this.isEditorDisabled = !this.isEditorDisabled;
    if (this.tinyEditor.editor) {
      this.tinyEditor.editor.setMode(this.isEditorDisabled ? 'readonly' : 'design');
    }
  }
}

3. 排查样式/脚本冲突 #

检查项目中是否有全局CSS或自定义脚本覆盖了TinyMCE的只读样式：

• 打开开发者工具，查看编辑器iframe内的<body>标签是否带有mce-content-readonly类
• 确认没有自定义样式移除了只读状态的禁止交互效果

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