TinyMCE 4.9.x仍无法在影子dom中工作。有什么想法可以解决吗？

Question

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

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

你有什么想法，如何在shadowDOM中初始化tinyMCE 4.9.3 for element？ （在FireFox 65.0.2上测试，Chrome 72.0.3626.121）

Answer 1

1. 将TinyMCE <textarea>放入轻量级DOM中。
2. 在<slot>元素的帮助下将其插入Shadow DOM中。

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="[email protected]" data-semver="4.4.3" src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

<my-element></my-element>