Tiny is excited to announce our TinyMCE integration into Web Components. Web Components are a set of built-in browser capabilities that let developers create custom HTML elements in a similar manner to what is available in frameworks like React or Angular.
Web Components comprise 3 basic capabilities:
- Shadow DOM
- Custom Elements
- HTML Templating
Shadow DOM provides the ability to create a "sandboxed" area of a web page, in a similar manner to iframes. An HTML element can have a "shadow root" attached to it, which is a tree of elements that are separate from the main document. Shadow roots are useful for having an area of the document that doesn't inherit styles from the main document. This is particularly handy for rich components like TinyMCE which have their own complex stylesheets and have to fit into any of our customer's web apps.
TinyMCE for Web Components provides a Custom Element, building on the experimental Shadow DOM support added in TinyMCE 5.4.
Once the TinyMCE custom element is installed on a web page, creating an editor instance is as simple as adding
TinyMCE for Web Components is available for free under an Apache 2.0 license, and can be installed via NPM. It is compatible with open source TinyMCE, Tiny Cloud, and TinyMCE commercial self-hosted offerings.
At this stage, TinyMCE for Web Components is an experimental integration - we would love to hear your feedback on how it can be improved. Note that TinyMCE's support for Shadow DOM is not yet complete, but we are actively working on it, so watch this space.
Getting started with TinyMCE for Web Components
You can get started with TinyMCE as a Web Component in just two lines of code - one in the head of your HTML to load the component, and another in the body to initialize it.
For example, open the following HTML file in a browser (replacing
no-api-key with your own Tiny API key). If you don’t yet have one, you can get a free API key now.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@1/dist/tinymce-webcomponent.js"></script> </head> <body> <h1>TinyMCE Web Component Simple Demo</h1> <tinymce-editor api-key="no-api-key"></tinymce-editor> </body> </html>
NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on
localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.
Full setup instructions are available in our Web Component integration guide.
Configuring the editor
TinyMCE is highly flexible and can be configured to create any UI/UX - check out 9 products you can build with TinyMCE.
For instance, to start with, you could remove the menu bar using the
<tinymce-editor api-key="no-api-key" menubar="false"></tinymce-editor>
Or you could start customizing user options with the
<tinymce-editor api-key="no-api-key" menubar="false" plugins="lists link image emoticons" toolbar="styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image emoticons"> </tinymce-editor>
More configuration information is available in our Web Component integration guide.