求助：如何在StencilJS应用中集成TinyMCE编辑器？

一、API Key的配置位置 #

TinyMCE的API Key直接在tinymce.init()的配置对象中添加api_key字段即可，示例：

tinymce.init({
  api_key: '你的API_KEY', // 替换成你自己的密钥
  // 其他配置项
});

二、正确的集成步骤（解决初始化失败问题） #

你在connectedCallback()中初始化失败，核心原因是此时组件内部的DOM元素（比如textarea）还未完成渲染，无法被TinyMCE获取。Stencil中应该使用componentDidLoad()生命周期钩子，它会在组件DOM完全渲染后触发。

1. 组件完整代码示例

import { Component, Element, h, ComponentDidLoad } from '@stencil/core';
import tinymce from 'tinymce';

@Component({
  tag: 'custom-tinymce',
  shadow: true, // 若不需要shadow DOM可设为false
})
export class CustomTinymce implements ComponentDidLoad {
  @Element() el: HTMLElement;

  componentDidLoad() {
    // 获取textarea元素
    const textarea = this.el.querySelector('textarea');
    if (!textarea) return;

    tinymce.init({
      target: textarea,
      api_key: '你的API_KEY',
      // 按需配置插件和工具栏
      plugins: 'advlist autolink lists link image charmap print preview',
      toolbar: 'undo redo | bold italic | alignleft aligncenter | bullist numlist | link image',
      // 若使用shadow DOM，需配置content_css确保样式正常
      content_css: 'default',
    });
  }

  render() {
    return (
      <div class="tinymce-wrapper">
        <textarea></textarea>
      </div>
    );
  }
}

2. 静态资源打包配置

TinyMCE依赖皮肤、插件等静态资源，需要在stencil.config.ts中配置复制规则，确保打包时这些资源被输出到正确目录：

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'your-app',
  outputTargets: [
    // 你的输出配置
  ],
  copy: [
    {
      src: 'node_modules/tinymce/skins',
      dest: 'skins'
    },
    {
      src: 'node_modules/tinymce/plugins',
      dest: 'plugins'
    }
  ]
};

三、常见问题排查 #

• 控制台若提示“找不到皮肤/插件”：检查静态资源是否正确复制，或者在tinymce.init()中指定skin_url和plugins_url路径
• 编辑器不显示：确认componentDidLoad()中正确获取到了textarea元素，可通过console.log(textarea)验证
• 样式异常（shadow DOM下）：调整content_css配置，或改用非shadow DOM模式

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