我可以将 Polymer 元素/WebComponents 与 TinyMCE 一起使用吗？

Question

我正在尝试构建一个用于教学内容的自定义 TinyMCE 编辑器，该编辑器将允许将某些块包装为“活动”。一个内容块中将有多个活动，因此它们将具有 ID 作为主键等。

我的挑战是实现一个允许这样做的插件——理想情况下，我会使用短代码，但它们很容易出错。我正在考虑使用通过 Polymer 呈现的自定义 HTML 标签——这可以做到吗？

Answer 1

大约4个小时后我就完全解决了。

TinyMCE 编辑器需要初始化并支持自定义元素，如下所示：

{
...
    extended_valid_elements : 'module-activity',
    custom_elements : 'module-activity',
    init_instance_callback: function(editor) {
        registerCustomWebComponents(tinymce.activeEditor.dom.doc);
    },
...
}

看起来像registerCustomWebComponents：

function registerCustomWebComponents(doc) {
  doc.registerElement('module-activity', ModuleActivityHTMLElement);  
}

我最终定义了自定义 HTML 元素，然后定义了一个 React 组件，而不是将 HTMl 构建为字符串。

class ModuleActivity extends React.Component {
  constructor(props) {
    super(props);
    this.openActivityEdit = this.openActivityEdit.bind(this);
  }

  openActivityEdit() {

  }

  render() {
    return <div>
      <h3>Module Activity</h3>
      <button onClick={this.openActivityEdit}>Edit</button>
      <div dangerouslySetInnerHTML={{__html: this.props.contentHtml }} />
    </div>;
  }
}


class ModuleActivityHTMLElement extends HTMLElement {
  attachedCallback() {
    let self = this;
    var mountPoint = document.createElement('div');
    this.createShadowRoot().appendChild(mountPoint);
    ReactDOM.render(<ModuleActivity contentHtml={self.innerHTML}/>, mountPoint);
  }
}