Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Ledzz/angular2-tinymce
Angular 2 component for TinyMCE MCE WYSIWYG editor
https://github.com/Ledzz/angular2-tinymce
angular angular2 angular2-tinymce tinymce tinymce-wysiwyg-editor typescript
Last synced: 8 days ago
JSON representation
Angular 2 component for TinyMCE MCE WYSIWYG editor
- Host: GitHub
- URL: https://github.com/Ledzz/angular2-tinymce
- Owner: Ledzz
- Created: 2017-01-24T18:09:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-06T17:17:35.000Z (over 6 years ago)
- Last Synced: 2024-10-11T16:11:17.591Z (28 days ago)
- Topics: angular, angular2, angular2-tinymce, tinymce, tinymce-wysiwyg-editor, typescript
- Language: TypeScript
- Homepage: https://angular2-tinymce.surge.sh
- Size: 610 KB
- Stars: 65
- Watchers: 11
- Forks: 37
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - angular2-tinymce - Angular 2 component for TinyMCE MCE WYSIWYG editor. (Uncategorized / Uncategorized)
README
# angular2-tinymce 
`Now compatible with Angular 6!`
[Demo](https://angular2-tinymce.surge.sh/)
## Usage
First, install tinymce and this lib via npm:
```
npm install --save tinymce angular2-tinymce
```
Then copy lightgray skin files from `node_modules/tinymce` to the `/assets` folder. So, i.e. there must be available `/assets/tinymce/skins/lightgray/skin.min.css` and `/assets/tinymce/skins/lightgray/content.min.css` file.
You can override skin path by specifying `skin_url` option (default `/assets/tinymce/skins/lightgray`).
To support AOT mode in Angular 6 and higher you also need to include tinymce in your scripts section in angular.json config file:
```json
"scripts": [
"node_modules/tinymce/tinymce.min.js",
...
]
```
Import `TinymceModule` in you `app.module.ts` like this:
```typescript
import { TinymceModule } from 'angular2-tinymce';
@NgModule({
imports: [
...
TinymceModule.withConfig({})
],
...
})
export class AppModule { }
```
Then use it:
```html
```
or
```html
```
You can also use template variable `tinymce` to get instance of tinymce:
```html
```
then in component.ts:
```typescript
@ViewChild('tinymce') tinymce;
ngAfterViewInit() {
console.log(this.tinymce);
}
```
## Configure
You can configure TinyMCE globally:
```typescript
import { TinymceModule } from 'angular2-tinymce';
@NgModule({
imports: [
...
TinymceModule.withConfig({
... //any TinyMCE config here
})
],
...
})
export class AppModule { }
```
Please note that config is extended a bit.
- Besides the original config angular2-tinymce supports `baseURL` for providing, i.e., custom plugins paths.
- `auto_focus` option is boolean instead of string.
- You cannot specify `selector` option (and you don't need to, right?).
- `setup` and `init_instance_callback` are executed after the components'.
- You can view more info about supported options [here](tree/master/src/angular2-tinymce.config.interface.ts)
Also you can override options in each instance like that:
```html
```
## Events
You can use outputs to catch tinymce events. You can see full list of available outputs [here](blob/master/projects/angular2-tinymce-lib/src/lib/angular2-tinymce-lib.component.ts#L37).
```html
```
## Plugins
If you need other plugins than standart (`link paste table advlist autoresize lists code`) you should create plugins folder in the `baseURL` (default `'/assets/tinymce'`) and place your plugins in it.
**Example:**
Place emoticons plugin to an `/assets/tinymce/plugins` folder, then:
```typescript
import { TinymceModule } from 'angular2-tinymce';
@NgModule({
imports: [
...
TinymceModule.withConfig({
plugins: ['emoticons'],
toolbar: 'emoticons'
})
],
...
})
export class AppModule { }
```
Alternativaly you can `npm install tinymce --save` and import plugins like that:
```typescript
import 'tinymce/plugins/emoticons/plugin.js';
```
## Contributing
Please feel free to leave your PRs, issues, feature requests.
## Upcoming features
- [x] Tinymce configuration
- [x] Aot support
- [x] Add demo
- [x] Add CI
- [x] Per-editor configuration
- [x] Events
- [ ] Directive
- [ ] File uploading
- [ ] Tests