我可以在TinyMCE上使用Polymer元素/ WebComponents嗎？

Question

我正在嘗試構建一個定製的TinyMCE編輯器來教授允許某些塊被封裝爲「活動」的內容。在一個內容塊中將會有多個活動，因此他們將ID作爲主鍵等。

我的挑戰是實現一個允許這樣的插件 - 理想情況下，我會使用簡碼，但它們很容易出錯。我正在研究使用可以通過聚合物渲染的自定義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元素，然後定義反應組件，而不是將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); 
    } 
}