Vue项目转为Web Component后TinyMCE功能全部失效求助

我之前碰到过类似情况，大概率是Web Component的Shadow DOM特性引发的，给你几个实测有效的修复方向：

• 资源加载被Shadow DOM隔离
  Web Component的Shadow DOM会隔离内外资源，TinyMCE的主题、插件等依赖可能没加载到编辑器所在的上下文里。
  解决办法：初始化TinyMCE时，用base_url指定资源的绝对路径，确保Shadow DOM能正常访问：

  tinymce.init({
    selector: '#editor',
    base_url: '/static/tinymce', // 替换成你项目中TinyMCE的实际路径
    plugins: 'advlist autolink lists link',
    toolbar: 'undo redo | bold italic | bullist numlist'
  })
  

  要是用Vue封装的TinyMCE组件，记得等Web Component挂载完成（比如Vue的mounted钩子）再初始化编辑器，不要过早执行。

• 样式隔离导致按钮看似禁用
  Shadow DOM的样式隔离会让TinyMCE的默认样式失效，有时候按钮不是真的禁用，只是样式没正常显示而已。
  解决办法：要么把TinyMCE的content.css手动导入到Web Component内部，要么初始化时设置content_css为绝对路径：

  tinymce.init({
    selector: '#editor',
    content_css: '/static/tinymce/content.css'
  })
  

  也可以试试在Web Component的样式里用:host选择器穿透，把TinyMCE的必要样式补充进去。

• 生命周期时机不匹配
  Vue转成Web Component后，组件的挂载、销毁逻辑和纯Vue组件有差异，TinyMCE初始化过早或销毁过晚都会出问题。
  解决办法：如果是原生自定义元素写法，就在connectedCallback里初始化编辑器，disconnectedCallback里销毁：

  class MyEditor extends HTMLElement {
    connectedCallback() {
      this.innerHTML = '<textarea id="editor"></textarea>';
      tinymce.init({ selector: '#editor' });
    }
    disconnectedCallback() {
      tinymce.remove('#editor');
    }
  }
  customElements.define('my-editor', MyEditor);
  

  要是用vue-cli的web-component-wrapper插件转换的，就在Vue组件的mounted钩子中初始化，unmounted钩子中销毁，确保和Web Component的生命周期对齐。

• 全局变量访问被限制
  Web Component的封装可能导致TinyMCE无法正常访问window上的全局属性，或者脚本加载顺序出问题。
  解决办法：确保TinyMCE的脚本在Web Component加载前就全局加载完成，不要在组件内部异步加载；初始化时可以明确指定上下文为window，避免被隔离。

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