Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 44 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,51 @@
# Official Web Component for TinyMCE

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
# Official Web Component for TinyMCE
# Official Web Component integration for TinyMCE

needs another word, otherwise it sounds like we're using 'component' the way we do for the react integration, etc.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commented on a couple like this but i may have missed instances - please check


# 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.
Official Web Component for TinyMCE, the rich text editor. It wraps TinyMCE as a `<tinymce-editor>` 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).

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering if we should add another sentence or two from the old content that explains what exactly this is/how to use it? I don't know web components well, or how much most devs would know about them / what they might be looking for that would lead them to this integration though tbh.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Official Web Component for TinyMCE, the rich text editor. It wraps TinyMCE as a `<tinymce-editor>` 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).
Official Web Components integration for TinyMCE, the rich text editor. It wraps TinyMCE as a `<tinymce-editor>` 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).

also wondering if there should be an s on Component now...


Web Components comprise 3 basic capabilities:
- Shadow DOM
- Custom Elements
- HTML Templating
Many of the standard configuration properties can be specified as attributes on the `<tinymce-editor>` 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.
## Quickstart

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.
### Cloud CDN

Once the TinyMCE custom element is installed on a web page, creating an editor instance is as simple as adding a `<tinymce-editor></tinymce-editor>` 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.
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:

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.
```html
<script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script>
```
1. Add the `tinymce-editor` element with your API key and configuration as HTML attributes:

```html
<tinymce-editor
api-key="your-api-key"
plugins="lists link image table code help wordcount"
>
<p>Welcome to TinyMCE</p>
</tinymce-editor>
```
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/)

### 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/)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 Components - Self hosted via NPM](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/)

i think this needs another word. up further too...


## 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.
7 changes: 1 addition & 6 deletions contributing.md
Original file line number Diff line number Diff line change
@@ -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.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is missing a line compared to the usual template, right? 'welcome to make prs' or someting

13 changes: 10 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading