Last active
November 17, 2019 16:53
-
-
Save branflake2267/f0b2b4d58c301ec2586228d8f379d95e to your computer and use it in GitHub Desktop.
Simple Froala Editor Web Component with script loader.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Simple Froala Editor Web Component Example</title> | |
| <!-- Import the web component, an html element --> | |
| <script src='./MyFroalaEditorElement.js'></script> | |
| </head> | |
| <body> | |
| <!-- My Froala Editor Web Component usage --> | |
| <my-froala-editor></my-froala-editor> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class MyFroalaEditorElement extends HTMLElement { | |
| constructor() { | |
| super(); | |
| } | |
| connectedCallback() { | |
| this.attachShadow({mode: 'open'}); | |
| this.shadowRoot.innerHTML = ` | |
| <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css' rel='stylesheet' | |
| type='text/css' /> | |
| <div class='editor'></div> | |
| `; | |
| this.importFroalaJs() | |
| .then(() => { | |
| let shadowFroalaEditorEl = this.shadowRoot.querySelector('.editor'); | |
| new FroalaEditor(shadowFroalaEditorEl); | |
| }).then(() => { | |
| this._addListeners(); | |
| }); | |
| } | |
| _addListeners() { | |
| } | |
| importFroalaJs() { | |
| // Load the Froala Editor once into the global scope. | |
| return new Promise((resolve, reject) => { | |
| if (typeof FroalaEditor == "undefined") { | |
| let src = 'https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js'; | |
| let script = document.createElement('script'); | |
| script.setAttribute('src', src); | |
| script.addEventListener('load', resolve); | |
| document.head.appendChild(script); | |
| } else { | |
| resolve(); | |
| } | |
| }); | |
| } | |
| } | |
| // Register the element | |
| window.customElements.define('my-froala-editor', MyFroalaEditorElement); |
Author
branflake2267
commented
Nov 17, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment