TinyMCE 4.9.x 仍然不能在 shadow dom 中工作。有什么想法如何解决吗？

Question

我尝试将 tinyMCE 初始化为放置在 shadowDOM 中的元素。（聚合物网络组件），但它不起作用。

我在这里找到的情况相同的例子：https : //embed.plnkr.co/WXtcz2GUpOhgrhWBTcAW/

你有什么想法，如何为shadowDOM中的元素初始化tinyMCE 4.9.3？（在 FireFox 65.0.2、Chrome 72.0.3626.121 上测试）

Answer 1

1. 将 TinyMCE 放入<textarea>light DOM 中。

2. 借助元素将其插入到 Shadow DOM 中<slot>。

class MyElement extends HTMLElement {
  connectedCallback() {
    const textarea = document.createElement('textarea')
    this.appendChild(textarea)
    this.attachShadow({ mode: 'open' })
        .innerHTML=`<style>
                :host { outline: 5px solid blue ; display: inline-block }
            </style>
            <slot></slot>`
    tinymce.init({
      target: textarea
    })
  }  
}

customElements.define('my-element', MyElement)

<script data-require="tinymce@4.4.3" data-semver="4.4.3" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

<my-element></my-element>