From 5bdae0bd20c18a9ba1c0f31d9706b6df77c92b5a Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Wed, 23 Sep 2026 11:52:35 +0930 Subject: [PATCH 1/5] TINYINT-3455: Update details --- README.md | 60 +++++++++++++++++++++++++++++++++++++++---------- contributing.md | 7 +----- package.json | 13 ++++++++--- 3 files changed, 59 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 13a1dca..b39c2ad 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,55 @@ +# Official Web Component for TinyMCE -# Official TinyMCE Web Component +## About -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. +`tinymce-webcomponent` component is a thin wrapper for [TinyMCE](https://www.npmjs.com/package/tinymce) that makes integrating TinyMCE into a web page easy and seamless. -Web Components comprise 3 basic capabilities: -- Shadow DOM -- Custom Elements -- HTML Templating +Once installed, creating an editor instance is as simple as adding a `` tag to the page. This tag is 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. -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 to 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 the Custom Element, building on the experimental Shadow DOM support added in TinyMCE 5.4. +## Quickstart -Once the TinyMCE custom element is installed on a web page, creating an editor instance is as simple as adding a `` tag to the page. This tag is 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. +### Cloud CDN -TinyMCE for Web Components is available for free under an MIT 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](https://github.com/tinymce/tinymce-webcomponent/issues) on how it can be improved. +In your project: + +1. [Sign up for a Tiny Cloud account](https://www.tiny.cloud/pricing/) to receive a Tiny Cloud API key. +2. Include the following script tag to load the Web Component from the CDN: + +```html + +``` + +3. Add the `tinymce-editor` element with your API key and configuration as HTML attributes: + +```html + +

Welcome to TinyMCE

+ +``` + +4. Update the `api-key` attribute to include your Tiny Cloud API key. + +For more information: [Using TinyMCE with Web Components - Cloud CDN](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/) + +### Self hosted via NPM package + +Using TinyMCE from NPM with the Web Component requires a couple of extra steps. See the documentation for more information: [Using TinyMCE with Web Components - Self hosted via NPM](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/) + +## Detailed documentation + +* [TinyMCE Web Component Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/). +* [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/). + +## Issues + +Have you found an issue with `tinymce-webcomponent` or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-webcomponent/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-webcomponent/pulls). *Note: for issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).* + +## License + +`tinymce-webcomponent` is licensed under the MIT License. See the LICENSE.txt file for details. + +Depending on use case, the TinyMCE core editor can be used under either GPL-2.0-or-later or a commercial license. See the [tinymce package](https://www.npmjs.com/package/tinymce) for details. diff --git a/contributing.md b/contributing.md index d166fff..76ec83b 100644 --- a/contributing.md +++ b/contributing.md @@ -1,8 +1,3 @@ # Contributing -This project follows the [beehive-flow](https://github.com/tinymce/beehive-flow/) branching process ("Basic process - release from main branch"). -Please read the [beehive-flow readme](https://github.com/tinymce/beehive-flow/blob/main/README.md) for more information. -This mainly affects branching and merging for Tiny staff. - -External contributors are free to submit PRs against the `main` branch. -Note that contributions will require signing of our Contributor License Agreement. +In order for Tiny to accept your contribution, we will need legal permission from you to use your code. Please email `legal@tiny.cloud` with the subject `CLA request for [your Github username]`. Our legal team will send you a Contributors License Agreement (CLA) which you will need to sign and return. diff --git a/package.json b/package.json index 5dadbd5..4fd7a54 100644 --- a/package.json +++ b/package.json @@ -19,10 +19,17 @@ "serve": "yarn tsx src/demo/ts/Server.ts" }, "keywords": [ - "TinyMCE", - "webcomponent" + "tinymce", + "webcomponent", + "component", + "editor", + "wysiwyg", + "rich-text-editor", + "html", + "javascript", + "browser" ], - "author": "Tiny Technologies", + "author": "Ephox Corporation DBA Tiny Technologies, Inc.", "license": "MIT", "devDependencies": { "@ephox/agar": "^8.0.1", From 1614df75b83f0e7a72c65ec77af373fd85ee78c5 Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Fri, 25 Sep 2026 07:52:11 +0930 Subject: [PATCH 2/5] Update About --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b39c2ad..e4bc15f 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,9 @@ ## About -`tinymce-webcomponent` component is a thin wrapper for [TinyMCE](https://www.npmjs.com/package/tinymce) that makes integrating TinyMCE into a web page easy and seamless. - -Once installed, creating an editor instance is as simple as adding a `` tag to the page. This tag is 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. +Official Web Component for TinyMCE, the rich text editor. It wraps TinyMCE as a `` custom element, used in place of calling `tinymce.init()`. By default, it pulls TinyMCE from the Tiny Cloud CDN unless configured to use a different setup, such as self-hosting the [tinymce NPM package](https://www.npmjs.com/package/tinymce). +Many of the standard configuration properties can be specified as attributes on the `` tag, instead of using JavaScript code. ## Quickstart From 5eb87e02c4eeb550702107467771a9888e82b94f Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Fri, 25 Sep 2026 10:45:12 +0930 Subject: [PATCH 3/5] Update quickstart structure --- README.md | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index e4bc15f..9f72daf 100644 --- a/README.md +++ b/README.md @@ -10,27 +10,24 @@ Many of the standard configuration properties can be specified as attributes on ### Cloud CDN -In your project: - 1. [Sign up for a Tiny Cloud account](https://www.tiny.cloud/pricing/) to receive a Tiny Cloud API key. -2. Include the following script tag to load the Web Component from the CDN: - -```html - -``` - -3. Add the `tinymce-editor` element with your API key and configuration as HTML attributes: - -```html - -

Welcome to TinyMCE

- -``` - -4. Update the `api-key` attribute to include your Tiny Cloud API key. +1. Then in your project: + 1. Include the following script tag to load the Web Component from the CDN: + + ```html + + ``` + 1. Add the `tinymce-editor` element with your API key and configuration as HTML attributes: + + ```html + +

Welcome to TinyMCE

+ + ``` + 1. Update the `api-key` attribute to include your Tiny Cloud API key. For more information: [Using TinyMCE with Web Components - Cloud CDN](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/) From 19d1b0498a72c585e29b6a737fc55a6c697a6dda Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Mon, 28 Sep 2026 11:14:53 +0930 Subject: [PATCH 4/5] Improve readme --- README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 9f72daf..2a071a5 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,8 @@ -# Official Web Component for TinyMCE +# Official Web Component integration for TinyMCE ## About -Official Web Component for TinyMCE, the rich text editor. It wraps TinyMCE as a `` custom element, used in place of calling `tinymce.init()`. By default, it pulls TinyMCE from the Tiny Cloud CDN unless configured to use a different setup, such as self-hosting the [tinymce NPM package](https://www.npmjs.com/package/tinymce). - -Many of the standard configuration properties can be specified as attributes on the `` tag, instead of using JavaScript code. +Official Web Component integration for TinyMCE, the rich text editor. Web Components are a set of native browser APIs — Custom Elements, Shadow DOM, and HTML Templates — that let you build reusable, framework-agnostic HTML elements. This package wraps TinyMCE as a `` custom element, used in place of calling `tinymce.init()`. Once installed on a page, creating an editor is as simple as adding a `` tag, with most configuration properties specified as attributes instead of JavaScript. By default, it pulls TinyMCE from the Tiny Cloud CDN unless configured to use a different setup, such as self-hosting the [tinymce NPM package](https://www.npmjs.com/package/tinymce). ## Quickstart @@ -12,7 +10,7 @@ Many of the standard configuration properties can be specified as attributes on 1. [Sign up for a Tiny Cloud account](https://www.tiny.cloud/pricing/) to receive a Tiny Cloud API key. 1. Then in your project: - 1. Include the following script tag to load the Web Component from the CDN: + 1. Include the following script tag to load the Web Component integration from the CDN: ```html @@ -29,11 +27,11 @@ Many of the standard configuration properties can be specified as attributes on ``` 1. Update the `api-key` attribute to include your Tiny Cloud API key. -For more information: [Using TinyMCE with Web Components - Cloud CDN](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/) +For more information: [Using TinyMCE with Web Component - Cloud CDN](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/) ### Self hosted via NPM package -Using TinyMCE from NPM with the Web Component requires a couple of extra steps. See the documentation for more information: [Using TinyMCE with Web Components - Self hosted via NPM](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/) +Using TinyMCE from NPM with the Web Component integration requires a couple of extra steps. See the documentation for more information: [Using TinyMCE with Web Component - Self hosted via NPM](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/) ## Detailed documentation From 417b2f084cd20fbfd6ee231604b2f2653257ca16 Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Mon, 28 Sep 2026 11:15:32 +0930 Subject: [PATCH 5/5] Update description and contributing --- contributing.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/contributing.md b/contributing.md index 76ec83b..c970dad 100644 --- a/contributing.md +++ b/contributing.md @@ -1,3 +1,5 @@ # Contributing +External contributors are free to submit PRs against the `main` branch. + In order for Tiny to accept your contribution, we will need legal permission from you to use your code. Please email `legal@tiny.cloud` with the subject `CLA request for [your Github username]`. Our legal team will send you a Contributors License Agreement (CLA) which you will need to sign and return. diff --git a/package.json b/package.json index 4fd7a54..ec8cde8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "description": "Official TinyMCE Web Component", + "description": "Official Web Component integration for TinyMCE rich text editor", "version": "2.4.1-rc", "name": "@tinymce/tinymce-webcomponent", "repository": {