如何在StencilJS中引入npm CKEditor4？脚本标签应放何处？

作为Stencil新手，直接添加script标签确实容易踩坑——因为Stencil组件的Shadow DOM隔离特性，还有组件生命周期的时机问题，直接把脚本扔进去要么找不到DOM元素，要么脚本执行时机不对。下面给你两种靠谱的实现方式：

方法一：通过组件生命周期动态加载并初始化（适合需要控制加载时机的场景） #

这种方式会在组件挂载完成后，动态创建script标签加载CKEditor，确保DOM元素已经存在后再初始化编辑器：

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

@Component({
  tag: 'ui-editor',
  styleUrl: 'style.scss',
  shadow: true
})
export class UiEditor {
  // 获取组件的根DOM元素，用来访问Shadow DOM内部
  @Element() el: HTMLElement;

  // 组件挂载完成后执行这个方法
  componentDidLoad() {
    // 动态创建script标签加载CKEditor核心文件
    const ckScript = document.createElement('script');
    // 注意：开发环境下这个路径是有效的，生产构建时建议用方法二的导入方式避免路径问题
    ckScript.src = './node_modules/ckeditor4/ckeditor.js';
    
    // 脚本加载完成后初始化编辑器
    ckScript.onload = () => {
      // 从Shadow DOM中找到编辑器容器
      const editorContainer = this.el.shadowRoot?.querySelector('#editor');
      // 确保CKEditor全局变量存在，且找到容器元素
      if (editorContainer && window.CKEDITOR) {
        // 传入DOM元素而非id，因为Shadow DOM的id是隔离的
        window.CKEDITOR.replace(editorContainer);
      }
    };

    // 将脚本添加到页面head中
    document.head.appendChild(ckScript);
  }

  render() {
    return (
      <div id="editor">
        <p>This is the editor content.</p>
      </div>
    )
  }
}

方法二：直接导入CKEditor脚本（更简洁，推荐） #

利用Stencil的打包能力直接导入CKEditor的脚本，无需手动创建script标签，同时避免生产环境的路径问题：

import { Component, h, ComponentDidLoad, Element } from '@stencil/core';
// 直接从npm包导入CKEditor脚本，打包工具会自动处理路径
import 'ckeditor4/ckeditor.js';

@Component({
  tag: 'ui-editor',
  styleUrl: 'style.scss',
  shadow: true
})
export class UiEditor {
  @Element() el: HTMLElement;

  componentDidLoad() {
    const editorContainer = this.el.shadowRoot?.querySelector('#editor');
    if (editorContainer && window.CKEDITOR) {
      window.CKEDITOR.replace(editorContainer);
    }
  }

  render() {
    return (
      <div id="editor">
        <p>This is the editor content.</p>
      </div>
    )
  }
}

关键注意事项 #

• Shadow DOM的特殊性：因为你开启了shadow: true，不能用document.getElementById('editor')找元素——必须通过组件的shadowRoot来查询，否则会找不到Shadow DOM内部的元素。
• 样式适配：如果CKEditor的样式没有正常显示，可以在你的style.scss中导入CKEditor的样式文件：

  @import '~ckeditor4/contents.css';
  @import '~ckeditor4/skins/moono-lisa/editor.css';
  

  （根据你使用的CKEditor皮肤调整路径）
• 生产构建验证：方法一中的./node_modules路径在开发环境可用，但生产构建后目录结构会变化，所以更推荐方法二的导入方式，让Stencil的打包工具自动处理资源。

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