Angular项目中TinyMCE编辑器UI不显示但元素存在求助

架构老林

2026-6-24

Angular项目中TinyMCE编辑器元素存在但不显示的排查方案

1. 移除冲突的依赖包

你的package.json中同时安装了旧版第三方封装的angular2-tinymce和官方官方的@tinymce/tinymce-angular，二者会导致依赖冲突，直接影响编辑器渲染：

npm uninstall angular2-tinymce
npm clean-install

2. 修复版本兼容性问题

你当前使用的Angular版本为9.x，而tinymce@7.0.1是较新版本，和Angular 9存在兼容适配问题。建议降级到适配Angular 9的稳定版本：

npm install tinymce@5.10.0 --save

3. 确保样式资源正确加载

TinyMCE依赖自身样式文件才能正常显示UI，可通过两种方式配置：

在angular.json中全局引入：
在build.options.styles数组中添加：

"node_modules/tinymce/skins/ui/oxide/skin.min.css",
"node_modules/tinymce/skins/content/default/content.min.css"

在组件内局部引入：
在组件的CSS文件中添加：

@import '~tinymce/skins/ui/oxide/skin.min.css';
@import '~tinymce/skins/content/default/content.min.css';

4. 检查编辑器初始化配置

确保组件中正确配置并初始化编辑器，示例代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tinymce-editor',
  template: `<editor [init]="editorConfig"></editor>`
})
export class TinymceEditorComponent {
  editorConfig = {
    height: 400,
    menubar: false,
    plugins: ['advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount'],
    toolbar: 'undo redo | formatselect | bold italic backcolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help'
  };
}