tinyMCE webcomponent不会使用lit-html触发事件

Question

我已经用lit-实现了tinyMCE。编辑器呈现得很好，但事件永远不会触发。

import { LitElement, html, css } from 'lit-element';
import '@tinymce/tinymce-webcomponent';


render() {
    return html`
      <tinymce-editor
        api-key="n***************************8"
        @change=${()=>this.handleChangeEvent}
      ></tinymce-editor>
    `;
  }


handleChangeEvent(e){
    // this never fires
  }

在HTML呈现之后，向编辑器添加侦听器也不起作用。

firstUpdated() {
    this.editor = this.shadowRoot.getElementById('editor');
    this.editor.addEventListener("change", (e)=>this.handleEvent(e));  // this also never fires
  }

有什么解决方法的想法吗？

Answer 1

这不是Lit的问题，这是<tinymce-editor>中缺少的功能，因为它不会触发您订阅的change事件。

它似乎有一个非常奇怪的合成事件的实现-我不认为组件实际上会触发任何合成事件(尽管一些浏览器可能会通过)。

它不是由<tinymce-editor>触发一个名为change的事件，而是查找一个名为on-Change的属性(根据the docs，但是源lowercases it)，该属性需要一个字符串。然后它使用@ephox/katamari Resolve查找具有该名称的函数。

基本上：

<tinymce-editor on-Change="handleChangeEvent"

将查找window.handleChangeEvent，如果找到该名称，则执行。它对作用域有一些处理--我认为你可以传递一个父对象，并在它上面调用一个命名实例方法。

Lit可以传递实际的函数引用：

<tinymce-editor .on-Change=${e => handleChangeEvent(e)}

但由于函数的解析方式，我认为这不适用于<tinymce-editor>。它只适用于全局定义的函数名。

但是，您可以获取其组件的the source，并将其全部提取出来用于您自己的实现。大多数情况下，它看起来只是隐藏了很多包装来加载他们的JS from a CDN with an API key，但你也可以直接加载它。

然后将它们的on-* weirdness替换为this.dispatchEvent，只要包含composed: true，它就会触发您期望的事件。