-
Notifications
You must be signed in to change notification settings - Fork 9
TINYINT-3455: Update details #79
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,19 +1,51 @@ | ||||||
| # 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. | ||||||
| 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). | ||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
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/) | ||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
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. | ||||||
| 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. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
needs another word, otherwise it sounds like we're using 'component' the way we do for the react integration, etc.
There was a problem hiding this comment.
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