Skip to content
Draft
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
7 changes: 2 additions & 5 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
# 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.
73 changes: 62 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,82 @@

## About

This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in an Angular application.
Official React component for TinyMCE, the rich text editor. It makes integrating TinyMCE into Angular applications easy and seamless.

* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/8/).
* For the TinyMCE Angular Quick Start, see: [TinyMCE Documentation - Angular Integration](https://www.tiny.cloud/docs/tinymce/8/angular-cloud/).
* For the TinyMCE Angular Technical Reference, see: [TinyMCE Documentation - TinyMCE Angular Technical Reference](https://www.tiny.cloud/docs/tinymce/8/angular-ref/).
* For our quick demos, check out the TinyMCE Angular [Storybook](https://tinymce.github.io/tinymce-angular/).
## Quickstart

### Support
### Cloud CDN

In your Angular project:

1. [Sign up for a Tiny Cloud account](https://www.tiny.cloud/pricing/) to receive a Tiny Cloud API key.
2. `npm install @tinymce/tinymce-angular`
3. Include the following code:

```js
import { Component } from '@angular/core';
import { EditorComponent } from '@tinymce/tinymce-angular';

@Component({
selector: 'app-root',
imports: [EditorComponent],
template: `
<h1>TinyMCE Angular demo</h1>
<editor
[init]="init"
apiKey="your-api-key"
/>
`
})
export class AppComponent {
init: EditorComponent['init'] = {
plugins: 'lists link image table code help wordcount'
};
}
```

4. Update the `apiKey` option in the editor element to include your Tiny Cloud API key.

For more information: [Using TinyMCE with Angular - Cloud CDN](https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/)

### Self hosted via NPM package

Using TinyMCE from NPM in an Angular project requires a couple of extra steps. See the documentation for more information: [Using TinyMCE with Angular - Self hosted via NPM](https://www.tiny.cloud/docs/tinymce/latest/angular-pm/)


## Demos

For our quick demos, check out the TinyMCE Angular [Storybook](https://tinymce.github.io/tinymce-angular/).

## Detailed documentation

* [TinyMCE Angular Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/).
* [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/).

## Version compatibility

|Angular version|`tinymce-angular` version|
|--- |--- |
|>=16.x <=21.x |8+ |
|>=16.x |8+ |
|14+ |7.x |
|13+ |6.x |
|9+ |4.x |
|<= 8 |3.x |
|< 5 | Not supported |

### Zoneless Support
This wrapper supports Angular's zoneless change detection. No additional configuration is needed — the component works with both zone-based and zoneless applications.
**Note**: The component works with both zone-based and zoneless applications.

### Issues
## Issues

Have you found an issue with tinymce-angular or do you have a feature request?
Have you found an issue with `tinymce-angular` or do you have a feature request?
Open up an [issue](https://github.com/tinymce/tinymce-angular/issues) and let us know
or submit a [pull request](https://github.com/tinymce/tinymce-angular/pulls).

_Note: for issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce)._


## License

`tinymce-angular` 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.
16 changes: 15 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,23 @@
"name": "@tinymce/tinymce-angular",
"version": "9.1.2-rc",
"private": true,
"description": "Official TinyMCE Angular Component",
"description": "Official Angular component for TinyMCE, a rich text editor.",
"license": "MIT",
"author": "Ephox Corporation DBA Tiny Technologies, Inc.",
"keywords": [
"tinymce",
"angular",
"zoneless",
"angular2",
"ng",
"ngx",
"component",
"wysiwyg",
"rich-text-editor",
"html",
"contenteditable",
"editor"
],
"scripts": {
"build": "yarn run clean && ng-packagr -p tinymce-angular-component/ng-package.json && json -I -f dist/tinymce-angular/package.json -e 'this.version=process.env.npm_package_version' && copyfiles README.md dist/tinymce-angular/",
"build-storybook": "ng run angular:build-storybook",
Expand Down
Loading