Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Web Components logo

TinyMCE for Web Components

Dylan Just

October 11th, 2020

Written by

Dylan Just
Dylan Just

Category

News & Updates

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.

Custom Elements allow a developer to register a new tag/element that can be included in the HTML of the page. The custom element's behaviour is defined in JavaScript code and then registered for use in HTML.

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-editor></tinymce-editor> tags to the page. These tags are used in place of calling tinymce.init(). Many of the standard configuration properties can be specified as attributes to this tag, instead of using JavaScript code.

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 menubar attribute:

<tinymce-editor api-key="no-api-key" menubar="false"></tinymce-editor>

Or you could start customizing user options with the plugins and toolbar attributes:

<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.

What’s next?

Related articles:

TinyMCE with custom skin and icons, and toolbar options grouped on the bottom.
Integration
Dylan Just
byDylan Just

Dylan Just is Tiny's Principal Architect and manages our integrations and IT team. A long-time Tiny veteran, Dylan has contributed to many of our products, and now focuses on how engineering works across teams.

Related Articles

  • CacheFly logo with arrow pointing towards a cloud with Tiny logo inside.
    News & Updates

    Reminder: Decommissioning TinyMCE CacheFly CDN

    by Ben Long in News & Updates
  • Rain cloud with background text "stable 4 -> 5".
    News & Updates

    Announcement: Change to TinyMCE Cloud stable

    by Ben Long in News & Updates
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor