tinymce / tinymce-angular

Official TinyMCE Angular Component

TinyMCE

The world's #1 open source rich text editor.

Using an old version of TinyMCE? We recommend you to upgrade to TinyMCE 7 to continue receiving security updates, or consider TinyMCE 5 LTS if you need more time to upgrade.

Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable, and flexible rich text editor. We’ve helped launch the likes of Atlassian, Medium, Evernote (and lots more that we can’t tell you), by empowering them to create exceptional content and experiences for their users.

With more than 350M+ downloads every year, we’re also one of the most trusted enterprise-grade open source HTML editors on the internet. There’s currently more than 100M+ products worldwide, powered by Tiny. As a high powered WYSIWYG editor, TinyMCE is built to scale, designed to innovate, and thrives on delivering results to difficult edge-cases.

You can access a full featured demo of TinyMCE in the docs on the TinyMCE website.

Get started with TinyMCE

Getting started with the TinyMCE rich text editor is easy, and for simple configurations can be done in less than 5 minutes.

TinyMCE Cloud Deployment Quick Start Guide

TinyMCE Self-hosted Deployment Guide

TinyMCE provides a range of configuration options that allow you to integrate it into your application. Start customizing with a basic setup.

Configure it for one of three modes of editing:

• TinyMCE classic editing mode.
• TinyMCE inline editing mode.
• TinyMCE distraction-free editing mode.

Features

Integration

TinyMCE is easily integrated into your projects with the help of components such as:

• tinymce-react
• tinymce-vue
• tinymce-angular

With over 29 integrations, and 400+ APIs, see the TinyMCE docs for a full list of editor integrations.

Customization

It is easy to configure the UI of your rich text editor to match the design of your site, product or application. Due to its flexibility, you can configure the editor with as much or as little functionality as you like, depending on your requirements.

With 50+ powerful plugins available, and content editable as the basis of TinyMCE, adding additional functionality is as simple as including a single line of code.

Realizing the full power of most plugins requires only a few lines more.

Extensibility

Sometimes your editor requirements can be quite unique, and you need the freedom and flexibility to innovate. Thanks to TinyMCE being open source, you can view the source code and develop your own extensions for custom functionality to meet your own requirements.

The TinyMCE API is exposed to make it easier for you to write custom functionality that fits within the existing framework of TinyMCE UI components.

Extended Features and Support

For the professional software teams that require more in-depth efficiency, compliance or collaborative features built to enterprise-grade standards, please get in touch with our team.

Tiny also offers dedicated SLAs and support for professional development teams.

Compiling and contributing

In 2019 the decision was made to transition our codebase to a monorepo. For information on compiling and contributing, see: contribution guidelines.

As an open source product, we encourage and support the active development of our software.

Want more information?

Visit the TinyMCE website and check out the TinyMCE documentation.

License

Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md file.

tinymce-angular's Issues

not running change detection after onFocusIn event

https://stackblitz.com/edit/angular-playground-nnnhqk?file=app%2Fapp.component.ts
Here is an example of the bug.

Using `fixed_toolbar_container` with tinymce-angular

I'm trying to utilize this configuration option, but i get theres an error in the console:

TypeError: Cannot read property 'setAttribute' of undefined

I suspect its something to do with the way angular renders templates. I can confirm the element is in the dom (via devtools inspection), but at the time of init, maybe its not?

Any help is appreciated.

Editor Full screen issue.

I have a used <editor *ngIf="defaultContent" [(ngModel)]='defaultContent' [init]='editorConfig'>

this is my configuration below -

export const editorConfig = {
    skin_url: '/assets/skins/lightgray',
    theme: 'modern',
    content_css: targetElt.getAttribute('href'),
    height: 300,
    branding: false,
    // content_security_policy: 'script-src \'self\' \'unsafe-inline\'; connect-src \'self\'; img-src \'self\';' +
    //     'style-src \'self\' \'unsafe-inline\';',
    plugins: 'textcolor anchor link lists wordcount fullscreen hr code table', // template
    hidden_input: false,
    menubar: false,
    toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  |' +
    'numlist bullist outdent indent  | paste | section | row | info | fullscreen | template | removeformat |' +
    'undo redo | code | table',
    templates: [
        {
            title: 'Some title 1', description: 'Some desc 1', content: '<div class="col-sm-12"><div class="row widget-sd">' +
            '<div class="sd-img col-sm-3"><img src="https://image.flaticon.com/icons/svg/321/321718.svg"></div>' +
            '<div class="col-sm-9"></div></div></div>'
        }
    ],
    table_default_attributes: {
        'border': '0'
    },
    table_default_styles: {
        'border-collapsed': 'collapse',
        'width': '100%'
    },
    table_responsive_width: true,
    table_advtab: false
}

When i click on editor full screen and then i click on browser back screen and again visited the editor screen then screen goes freeze, no scrollbar is appearing on my theme.

Disabled state for tinymce-angular editor don't works correctly

Related Issue #33

#33 (comment)

I prepared example for you: https://stackblitz.com/edit/tinymce-angular-disabled?file=src%2Fapp%2Fapp.component.html

How you can see, we have 2 problems:

1. Text in editor "Test description" is black. When user see this black color for description, he don't understand that this editor is Disabled. I meen we need more light color (Need special 'disable color' for description of editor)
2. Editor buttons has hover when we move cursor on File, Edit, View, Undo, Redo and other edditor links. But Edditor is Disabled. Why we have hover?

WARNING: Too many active WebGL contexts. Oldest context will be lost.

We started using a trial version of TinyMce on our developing app. And we have a situation where we would need use the editor multiple times (20-30 times) in a single page, in fact its a single form having multiple textarea fields.

It all looks good however we get the warning on javascript console saying:

"WARNING: Too many active WebGL contexts. Oldest context will be lost.".

Any help would be really appreciated.

Ways to pass tinymce.init settings dynamically in ediotor [init] directive?

Hi I am working with angular 6 (angular cli) and trying to pass init settings dynamically to the editor like from angular modal component variable,
but i am unable to parse the code like that.
I need to implement setup callbacks too to add editor button dynamically. Could you please let me know how can i achieve that?
Here is my code sample
//component.html <editor apiKey="6clpn5thf1tjtmb9b4g8nl4gvftncb4ld4m0zhi4f4ndhrtu" [init]="{{settings}}"></editor> //component.ts public settings = { plugins: 'link', menubar : false }

MIME type skin error

news:1 Refused to apply style from 'http://localhost:4200/pages/add/assets/tinymce/skins/tundora/skin.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

When I try to load a skin, in console shows this.

How could I resolve?

Thx!

How to set format as default.

I am trying to set the default format as div instead of p, any idea ?

I've been checking the oficial documentation but i couldnt solve it

<editor apiKey="test" [init]="{plugins: 'link'}" [(ngModel)]="source"></editor>

i am sure that the configuration has to be placed inside [init] but i dont know how...

How to pass a images_upload_handler into the editor?

I have a project that is using the images_upload_handler in order to store images out on AWS.
Is there any way to pass the images_upload_handler function (blobInfo, success, failure) { ... }
to the editor?

[inline]="true" is not working / no tinymce visible

The "inline" mode, via the [inline]="true" configuration option is empty.

Code:

<editor [(ngModel)]="Text" [inline]="true" name="Text"></editor>

Rendered:

<div _ngcontent-c14="">
    <editor _ngcontent-c14="" name="Text" _nghost-c8="" ng-reflect-inline="true" ng-reflect-name="Text" class="ng-untouched ng-pristine ng-valid">
        <!---->
        <div id="tiny-react_21502752331535284906777" class="mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
            <p><br data-mce-bogus="1"></p>
        </div><input type="hidden" name="tiny-react_21502752331535284906777">
    </editor>
</div>

But it's empty. 😢

Same like in the AngularJS version: angular-ui/ui-tinymce#41

tinymce-angular compatible with Angular 4.4.4?

Hi,

I am looking to integrate the Rich Text Editing of TinyMCE in an Angular 4 project. Are any of the older releases compatible? If I try and npm install the latest it indicates it requires a peer of Angular 6 or greater.

Cheers,

-John

@angular peerDependencies

Hello! Forgive me if I'm not correct here, but I believe @angular dependencies should be peer dependencies. I'm in the process of upgrading to angular 6.0, and I was getting

npm WARN @angular/[email protected] requires a peer of rxjs@^5.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^5.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of rxjs@^5.5.0 but none is installed. You must install peer dependencies yourself.

This is because @tinymce/tinymce-angular has angular ^5.2.0 as a hard dependency, meaning angular 5.2.10 was installed to node_modules/@tinymce/tinymce-angular/node_modules in my project. If angular were marked as a peerDependency, the error would have been:

npm WARN @tinymce/[email protected] requires a peer of @angular/common@^5.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tinymce/[email protected] requires a peer of @angular/core@^5.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tinymce/[email protected] requires a peer of @angular/forms@^5.2.0 but none is installed. You must install peer dependencies yourself.

Sorry if this was an intentional decision!

Reactive form setting editor disabled has no effect before editor loaded

I have an Angular 7 reactive form which sets the editor to disabled before the page has a chance to finish completely loading. My code fetches the record being viewed on-screen, but it's on my dev machine, so the response time is very fast (likely before loading and rendering has finished).

I did a quick test to see if I placed on button the screen and disabled the editor using the exact same line, but in this case I was testing after the component had fully rendered. It worked fine. So I know the problem is strictly a before-fully-rendered issue.

I looked at the source and think I spotted the issue: line 83 sets readonly: true in the init. I can't find any documentation on the TinyMCE website that says that that's a valid init option; am I overlooking something?

I'm running version 2.3.2 of this package on 7.1.3 of Angular. Due to the way this package loads TinyMCE from the cloud, I don't know how to find what version number of TinyMCE I'm running, but I'm happy to provide it if someone can tell me where to look.

Event dont pass the $eventObj

1. When binding events to an editor, when the event handler gets called, it does not contain the event or the editor properties.

2. when adding the auto_focus field to the tiny init data, it wont now focus the editor.

<editor (onSetContent)="handleEvent($eventObj)" *ngIf="isPlatformBrowser" formControlName="text" [init]="tinymceInit"></editor>

self.tinymceInit = {
           "plugins": 'image link lists textcolor',
           "toolbar": 'bold italic strikethrough forecolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
           "menubar": '',
           "resize": false,
           "height": "100%",
           "auto_focus": true,
           "skin_url": '/assets/skins/lightgray',
           "forced_root_block" : 'div'
       };

public handleEvent(event){
       console.log(event); // undefined
}

We got this error when we tried to solve to focus the editor after its content set.

Including tinymce.min.js in .angular-cli.json doesn't work

Originally in my index.html I had:

<script src="assets/lib/tinymce/tinymce.min.js"></script>

And that worked. However, if I move the include to .angular-cli.json, like so:

      "scripts": [
        "../src/assets/lib/tinymce/tinymce.min.js"
      ],

I get the following error:

:4200/themes/modern/theme.js Failed to load resource: the server responded with a status of 404 (Not Found)

I think this is a bug?

ngModel is not updated after using "Undo" and "Redo" features

I use this editor with Angular 5. I make some changes in the editor and then tap button "Redo". My changes are returned and in preview I see actual result. But ngModel contains previous result. The same happens with "Redo" button. It seems "Undo" and "Redo" features don't update ngModel value. Is it a bug or maybe I did something wrong? Also "Undo" and "Redo" buttons don't invoke onChange event. The same happens with "Ctrl + Z" and "Ctrl + Y" hotkeys. Please check these cases.

Formgroup valuechanges only fired once

When using the editor with reactive forms and subscribing to valueChanges with updateOn: 'blur', values are only emitted on first blur.

Expectation: valueChanges should emit on all blurs just as normal text inputs.

I've made reproducable example here: https://stackblitz.com/edit/angular-mbyihs

Feat: Support for mat-form-field when using the editor with Angular Material

It would be great if the component could be used inside a <mat-form-field>

Currently if I include the editor inside the mat-form-field like this:

  <mat-form-field>
      <editor></editor>
  </mat-form-field>

I receive the error:

ERROR Error: mat-form-field must contain a MatFormFieldControl.

As far as i know it´s possible to create a custom form field
https://material.angular.io/guide/creating-a-custom-form-field-control

The EditorComponent would need to implement the interface MatFormFieldControl

TinyMCE Angular doesn't show bullist or numlist - normal TinyMCE does.

Hi, We're having problems with TinyMCE Angular showing bullist and numlist options.

Our config is as follows - notice lists is present in plugins, and bullist numlist is present in toolbar.

this.tinyMceInit = {
	plugins: 'preview,searchreplace,paste,wordcount,lists,autoresize',
	branding: false,
	menubar: false,
	elementpath: false,
	gecko_spellcheck: true,
	toolbar: 'copy paste undo redo | bold italic underline bullist numlist',
	skin: 'customskin',
	valid_elements: 'strong/b,br,p,u,ul,ol,li,i/italic,em',
	invalid_elements: 'strike',
	extended_valid_elements: "span[style]",
	valid_styles: {'*': 'text-decoration'},
	autoresize_bottom_margin: 20,
	autoresize_max_height: 500,
	setup: function (editor) {
		editor.on('paste', function (e) {
			component.markFormAsDirty();
		});
	}
};

This results in the following editor:

Notice that bullist and numlist are both missing.

Using the same config (minus the custom skin) on the same TinyMCE version without Angular shows the options. See Fiddle here.

We're doing nothing with those options in the skin, so all the evidence points to an issue with TinyMCE Angular. Our package.json lists @tinymce/tinymce-angular as version ^2.0.0.

Editor fails on browser animation

Problem

The editors content becomes unresponsive and unusable after a browser animation fades it out (I don't know if it is specific to material tabs, but may be).

Reproduction

1. Place the editor in a Material Tab
   I made a reproduction of the error here (Stackblitz).

Bug

1. Dismiss the cloud warning
2. Type some text in the editor
3. Change tabs
4. Change the tabs back to the editor

Provide better documentation for self loading TinyMCE over npm

Full angular integration should be a topic in this repository.
Self hosting TinyMCE in Angular projects using TinyMCE-Angular is probably very interesting for a lot of projects.

I struggle to comprehend what is necessary to provide a standalone version of TinyMCE for my Angular (7) project.

The documentation provided is not sufficient, nor is the module loader documentation

Add Reactive Forms sample to demo page

This is just a suggestion as it wasn't immediately obvious this control supports Reactive Forms

unable to webpack with env.prod

Hi,
I'm using the module in an angular project managed with webpack.
All ok in development mode, but if I try to webpack with env.prod I have this error:

ERROR in @tinymce\tinymce-angular\tinymce-tinymce-angular.ts(7,2): Error during template compile of 'EditorModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.

any idea?
thanks

"tinymce": "^4.7.11",
"@tinymce/tinymce-angular": "^1.0.7"
"webpack": "^3.10.0"
"typescript": "2.6.2"

Compilation errors if we import EditorModule from tinymce-angular(1.0.8) in angular4

I am trying integrate tinymce to my application.

I have used npm install @tinymce/tinymce-angular

Then I imported EditorModule to appmodule.js and added EditorModule in @NgModule{imports:[EditorModule,]}

After saving it I am getting the below compilation error and blank page shown with error in console Uncaught Error: Unexpected value 'EditorModule' imported by the module 'AppModule'. Please add a @NgModule annotation

Compilation error:-

WARNING in ./node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/esm5/core.js 6590:15-102 Critical dependency: the request of a dependency is an expression at ImportLazyContextDependency.getWarnings (C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\webpack\lib\dependencies\ImportContextDependency.js:28:4) at Compilation.reportDependencyErrorsAndWarnings (C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\webpack\lib\Compilation.js:677:24) at Compilation.finish (C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\webpack\lib\Compilation.js:535:9) at applyPluginsParallel.err (C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\webpack\lib\Compiler.js:512:17) at C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\tapable\lib\Tapable.js:289:11 at _addModuleChain (C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\webpack\lib\Compilation.js:481:11) at processModuleDependencies.err (C:\Users\mRoads\Desktop\Projects\panna-frontend\node_modules\webpack\lib\Compilation.js:452:13) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9)

Angular version:- 4
Tinymce:- 1.0.8

Do i need to upgrade from angular 4 to angular 5?

Editor fails to initialize if used inside of a component ng-content block that is hidden at first

Issue description:

I've created a component that takes in content, an editable flag, and a read-only label:
<app-ng-content-test [readOnlyContent]='readonly text' [editable]='isEditable'> <editor></editor> </app-ng-content-test>

Inside of this component (app-ng-content-test), I use an ngIf control block to show either my ng-content or my read only content.
<span *ngIf="editable; else readonlyBlock"> <ng-content></ng-content> </span> <ng-template #readonlyBlock> {{readOnlyContent}} </ng-template>

When using a tinymce-angular editor inside of the component's content block, and defaulting the component to hide the editable content, the editor component fails to initialize, ever. When defaulting the component to show the editable content, the editor component initializes and works no matter how many times you toggle the wrapping component's editability.

It seems like the editor component is not correctly detecting that it has been added to the DOM when used in this way.

Please see this branch in my fork for a working example: https://github.com/talikan/tinymce-angular/tree/ng-content-test

Disabled state for tinymce-angular editor don't works correctly

When component get disabled state to then elements inside TinyMCE are disabled incorrect (Users don't understand that editor component is lock/disabled). In the disabled state we expect the inactive fade component, but now it's not so.

We have 2 problems in TinyMCE:

1. Text (description) has bright black color , although the component is disable;
2. Buttons of editor can be get focus/hover on the element, although the component is disable;

Please, fix this behavors for

Angular 6.0 support

Can you please update the wrapper to support Angular 6.0 ?

After updating to Angular 6.0, I get these errors:

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/src/application_ref.d.ts(8,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/src/event_emitter.d.ts(8,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/src/linker/query_list.d.ts(8,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/src/util/lang.d.ts(8,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/forms/src/directives/abstract_control_directive.d.ts(8,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/forms/src/directives/validators.d.ts(9,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/forms/src/model.d.ts(1,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/forms/src/validators.d.ts(9,10): error TS2305: Module '"C:/my-app/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.

(Yes, I know it's rxjs, but Angular 6.0 is based on rxjs 6.0)

Thanks.

Angular 6 + Reactive forms: How to clear editor content?

Why the code below does not clear editor content?
this.form.controls.editor.setValue(null);

I can clear the content using the next code:
this.form.controls.editor.setValue('<p></p>')

It would be great to have an opportunity to set null/undefined to the control and expect that editor content will be empty after that and control value will not contain some html code.

tinymce destory issue

i used tinymce-angular component in tow pages, when i click route one page, then quickly click route to another page, some error happened. look like the photo. how to solve it, thank you.

Translation

Im receiving an error Failed to load plugin url: https://cloud.tinymce.com/stable/langs/pt_BR.js when passing language attribute: <editor [init]="{ language: 'pt_BR' }"> </editor>. Is this CDN related? Is there a way to translate the editor?

tinymce-angular ngModel clears existing value

Hello,

I'am using @tinymce/tinymce-angular package version 1.0.3 on Angular 4 project, and the problem I have is when I set the [(ngModel)]="content" (content being a string variable loaded from api) on the <editor> it clears the value of content so it's an empty string.

I'am using the editor this way:

<editor apiKey="apikey" [init]="tinyMceInit" name="content" [(ngModel)]="articleModel.content" required>
</editor>

• articleModel is an Object with content: string; attribute and more..
• tinyMceInit is an Object with init parameters.

Thank you,
Issam.

Issue in passing dynamic variable

<editor name="content" apiKey="bw7027mr5eymh5qc2f2263pfdh5ch6shxlgfocm3y58t1nee" [(ngModel)]="emailData.emailcontent" [init]="{ forced_root_block : 'false', plugins: 'paste', paste_text_sticky: true, paste_text_sticky_default: true, paste_as_text: true, setup: setupfunc, toolbar1: 'mybutton | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent ', menubar: true}" ></editor>
How can I pass dynamic content to setupfunc from html or how can I bind data to setupfunc in component file

This is my ts function code

setupfunc(editor) {
		let mainArrPS = [];
	
		//console.log(this.emailData);
		//if(this.var == 'verify-account'){
	        		this.emailVariables = ['promo','eventId'];

	        	//}
		console.log(this.emailVariables);
		//this.emailVariables = ['promo','eventId'];
		this.emailVariables.forEach(eachObj => {
						mainArrPS.push({
				text: eachObj,
				onclick: function() {
				  editor.insertContent(' {{'+eachObj+'}} ');
				}
			  });
									
						});
			editor.addButton('mybutton', {
			  type: 'menubutton',
			  text:  #'Variables',
			  icon: false,
			  menu: mainArrPS
			});
		  }

Angular 7 support

This is a support request for angular 7

When I try to install tinymce-angular to an angular 7 project it produces 3 warnings.

npm WARN @tinymce/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tinymce/[email protected] requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tinymce/[email protected] requires a peer of @angular/forms@^6.0.0 but none is installed. You must install peer dependencies yourself.

Expected behavior

To be compatible with angular 7 and produce no warning when installing.

Minimal steps to reproduce of the problem

Run an angular 7 project.

npm install @tinymce/tinymce-angular

Angular version:

7.0.3

tinymce-angular version:

2.0.1

Wrong text in model with pagebreak-plugin

tinymce-angular/tinymce-angular-component/src/editor/editor.component.ts

Line 159 in 69c3827

({ content, format }: any) => format === 'html' && content && this.ngZone.run(() => this.onChangeCallback(content))

I use model-binding via [(ngModel)].
When inserting a pagebreak via the pagebreak-plugin my model ist updated with only the pagebreak-HTML. I think this line is responsible. Should't it be editor.getContent() here too?

Not working at all in Chrome

When following the instructions in the README, I get the following error in the browser console:

Uncaught TypeError: _this.onChangeCallback is not a function
at eval (tinymce-angular.es5.js:387)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4733)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at NgZone.run (core.js:4550)
at yb.eval (tinymce-angular.es5.js:387)
at zd.r.fire (tinymce.min.js:2)
at yb.fire (tinymce.min.js:2)
at jy (tinymce.min.js:2)

Googling the error just shows that someone else experienced the same issue 3 days ago:
https://community.tinymce.com/communityQuestion?id=9066100000097amAAA

And there are no responses to that entry.

How do we add a custom button from our template?

Hi there,

How do we add a custom button from our template? I have tried the following:

<editor
    [init]="{setup: function (editor) { editor.addButton('mybutton', { ... }); } }"
    toolbar="undo, redo, mybutton">
</editor>

But always receive "Missing expected }..." in the console.

I have also tried:

<editor
    (onInit)="initTinyMCE($event)"
    toolbar="undo, redo, mybutton"
</editor>

where the method called consists of the following:

initTinyMCE(event: any): void {
    event.editor.addButton('mybutton', { ... });
}

Using this second attempt, I can see 'mybutton' in the console when I log event.editor.buttons but it never appears in the toolbar alongside undo and redo. Am I missing something?

How to get the content of the editor in Angular 6.0.9?

How to access the content of the editor? I'm using the [(ngModel)]="dataModel" variant...

NPM Package of @tinymce/tinymce-angular not updated properly

Hi,
i am trying to take the tinymce-angular update using npm command like (npm i @tinymce/tinymce-angular or npm install @tinymce/tinymce-angular) but it is not comming properly, am try to integrate it throught angular project wrt url https://www.tinymce.com/docs/integrations/angular2/ .but it is not working .Because selector (editor) is not comming .Please check the issue.

Metadata version mismatch

Getting the below error while running ng serve with "@tinymce/tinymce-angular": "^2.0.0".

ERROR in Metadata version mismatch for module /media/loop/New Volume1/next/adminpanel/node_modules/@tinymce/tinymce-angular/tinymce-tinymce-angular.d.ts, found version 4, expected 3

But if the project is reloaded this error will go and will compile successfully, but cant build the project using ng build.

Window not defined when use angular-tinymce with angular ssr

[angular ssr tinymce window / document is not defined]

Angular ssr crash if <editor formControlName="something" [init]="tinymceInit"> is in the html, because tinymce use dom specific object that are not exists on server side.

After a while I was able to find a simple workaround. I just hide the tinymce if the page on sever side as follow:

<editor *ngIf="isPlatformBrowser" formControlName="something" [init]="tinymceInit"></editor>

You can get the is isPlatformBrowser variable, just you have to inject it into the constructor:

export class AppModule {
    constructor(
        @Inject(PLATFORM_ID) private platformId: Object,
        @Inject(APP_ID) private appId: string,
    ) {
        const self = this;

        self.isPlatformBrowser = isPlatformBrowser(platformId);
    }
}

This is working for me, but I think it should be handled by tinymce-angular itself.

Content_css not being loaded correctly

Setting the content_css variable in the config object I receive the following error:

Refused to apply style from 'http://localhost:4200/mce.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Config object :

public mceConfig = {
   skin_url: '/assets/plugins/tinymce/skins/lightgray',
   content_css: '/mce.scss',
   height: '480',
   branding: false
 };

Expected behavior:

When in dev mode tinymce-angular should load content_css corretly.
When in prod mode tinymce-angular should load content_css correctly from bundles

Errors when editor shown in tabs

I'm running Angular 7.0.2, tinymce 4.8.5 and @tinymce/tinymce-angular 2.3.1.

If i have a tab group control, and inside that i have an editor inside one of the tabs, i sometimes get errors. The editor shows, but the content is hidden and locked.

ERROR TypeError: "elm is undefined" aria http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:2454:11 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:2581:11 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:3990:9 createMethod http://localhost:8333/dist/lib/tinymce/tinymce.js:25712:17 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:8466:16 createMethod http://localhost:8333/dist/lib/tinymce/tinymce.js:25712:17 exec http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1874:13 1 http://localhost:8333/dist/lib/tinymce/tinymce.js:2113:15 each http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1832:9 exec http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1872:9 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:3202:22 createMethod http://localhost:8333/dist/lib/tinymce/tinymce.js:25712:17 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:8300:16 createMethod http://localhost:8333/dist/lib/tinymce/tinymce.js:25712:17 exec http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1874:13 1 http://localhost:8333/dist/lib/tinymce/tinymce.js:2113:15 each http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1832:9 exec http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1872:9 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:3202:22 createMethod http://localhost:8333/dist/lib/tinymce/tinymce.js:25712:17 exec http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1874:13 1 http://localhost:8333/dist/lib/tinymce/tinymce.js:2113:15 each http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1832:9 exec http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1872:9 postRender http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:3202:22 createMethod http://localhost:8333/dist/lib/tinymce/tinymce.js:25712:17 renderBefore http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:2522:9 render http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:1170:7 renderUI http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:3921:70 renderUI http://localhost:8333/dist/lib/tinymce//themes/modern/theme.js:4745:16 renderFromLoadedTheme http://localhost:8333/dist/lib/tinymce/tinymce.js:23770:14 renderThemeUi http://localhost:8333/dist/lib/tinymce/tinymce.js:23818:16 2 http://localhost:8333/dist/lib/tinymce/tinymce.js:23835:17 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:23921:13 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:6726:19 1 http://localhost:8333/dist/lib/tinymce/tinymce.js:2113:15 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:6723:13 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:6736:9 loadQueue http://localhost:8333/dist/lib/tinymce/tinymce.js:6673:9 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:23919:9 waitFor http://localhost:8333/dist/lib/tinymce/tinymce.js:6847:11 loadTheme http://localhost:8333/dist/lib/tinymce/tinymce.js:23875:11 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:6726:19 1 http://localhost:8333/dist/lib/tinymce/tinymce.js:2113:15 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:6723:13 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:6736:9 loadQueue http://localhost:8333/dist/lib/tinymce/tinymce.js:6673:9 loadTheme http://localhost:8333/dist/lib/tinymce/tinymce.js:23874:9 loadScripts http://localhost:8333/dist/lib/tinymce/tinymce.js:23916:7 render http://localhost:8333/dist/lib/tinymce/tinymce.js:24008:7 render http://localhost:8333/dist/lib/tinymce/tinymce.js:24566:9 createEditor http://localhost:8333/dist/lib/tinymce/tinymce.js:25333:13 initEditors http://localhost:8333/dist/lib/tinymce/tinymce.js:25363:17 1 http://localhost:8333/dist/lib/tinymce/tinymce.js:2113:15 initEditors http://localhost:8333/dist/lib/tinymce/tinymce.js:25359:13 bind http://localhost:8333/dist/lib/tinymce/tinymce.js:963:15 bind http://localhost:8333/dist/lib/tinymce/tinymce.js:6442:16 init http://localhost:8333/dist/lib/tinymce/tinymce.js:25369:9 initialise http://localhost:8333/dist/lib/tinymce-angular.js:1:9042 invoke http://localhost:8333/dist/lib/zone.js:388:17 run http://localhost:8333/dist/lib/zone.js:138:24 runOutsideAngular http://localhost:8333/dist/lib/angular/core.js:14153:20 initialise http://localhost:8333/dist/lib/tinymce-angular.js:1:8997 ngAfterViewInit http://localhost:8333/dist/lib/tinymce-angular.js:1:7613 callProviderLifecycles http://localhost:8333/dist/lib/angular/core.js:18964:13 callElementProvidersLifecycles http://localhost:8333/dist/lib/angular/core.js:18938:17 callLifecycleHooksChildrenFirst http://localhost:8333/dist/lib/angular/core.js:18928:33 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19864:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execEmbeddedViewsAction http://localhost:8333/dist/lib/angular/core.js:20059:21 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19856:9 callViewAction http://localhost:8333/dist/lib/angular/core.js:20096:25 execComponentViewsAction http://localhost:8333/dist/lib/angular/core.js:20038:17 checkAndUpdateView http://localhost:8333/dist/lib/angular/core.js:19861:9 callWithDebugContext http://localhost:8333/dist/lib/angular/core.js:20749:26 debugCheckAndUpdateView http://localhost:8333/dist/lib/angular/core.js:20427:16 detectChanges http://localhost:8333/dist/lib/angular/core.js:18236:17 tick http://localhost:8333/dist/lib/angular/core.js:14922:62 tick http://localhost:8333/dist/lib/angular/core.js:14922:17 next http://localhost:8333/dist/lib/angular/core.js:14813:103 invoke http://localhost:8333/dist/lib/zone.js:388:17 onInvoke http://localhost:8333/dist/lib/angular/core.js:14194:28 invoke http://localhost:8333/dist/lib/zone.js:387:17 run http://localhost:8333/dist/lib/zone.js:138:24 run http://localhost:8333/dist/lib/angular/core.js:14108:20 next http://localhost:8333/dist/lib/angular/core.js:14813:73 schedulerFn http://localhost:8333/dist/lib/angular/core.js:10299:40 __tryOrUnsub http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:209:13 next http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:147:17 _next http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:90:9

View_RichTextComponent_0 RichTextComponent.html:2:3 proxyClass http://localhost:8333/dist/lib/angular/compiler.js:17185:24 DebugContext_.prototype.logError http://localhost:8333/dist/lib/angular/core.js:20711:13 ErrorHandler.prototype.handleError http://localhost:8333/dist/lib/angular/core.js:12688:17 ApplicationRef.prototype.tick/< http://localhost:8333/dist/lib/angular/core.js:14929:67 ZoneDelegate.prototype.invoke http://localhost:8333/dist/lib/zone.js:388:17 Zone.prototype.run http://localhost:8333/dist/lib/zone.js:138:24 NgZone.prototype.runOutsideAngular http://localhost:8333/dist/lib/angular/core.js:14153:20 ApplicationRef.prototype.tick http://localhost:8333/dist/lib/angular/core.js:14929:17 next/< http://localhost:8333/dist/lib/angular/core.js:14813:103 ZoneDelegate.prototype.invoke http://localhost:8333/dist/lib/zone.js:388:17 onInvoke http://localhost:8333/dist/lib/angular/core.js:14194:28 ZoneDelegate.prototype.invoke http://localhost:8333/dist/lib/zone.js:387:17 Zone.prototype.run http://localhost:8333/dist/lib/zone.js:138:24 NgZone.prototype.run http://localhost:8333/dist/lib/angular/core.js:14108:20 next http://localhost:8333/dist/lib/angular/core.js:14813:73 EventEmitter.prototype.subscribe/schedulerFn< http://localhost:8333/dist/lib/angular/core.js:10299:40 SafeSubscriber.prototype.__tryOrUnsub http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:209:13 SafeSubscriber.prototype.next http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:147:17 Subscriber.prototype._next http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:90:9 Subscriber.prototype.next http://localhost:8333/dist/lib/rxjs/internal/Subscriber.js:67:13 Subject.prototype.next http://localhost:8333/dist/lib/rxjs/internal/Subject.js:60:25 EventEmitter.prototype.emit http://localhost:8333/dist/lib/angular/core.js:10283:58 checkStable http://localhost:8333/dist/lib/angular/core.js:14163:17 onHasTask http://localhost:8333/dist/lib/angular/core.js:14207:25 ZoneDelegate.prototype.hasTask http://localhost:8333/dist/lib/zone.js:441:21 ZoneDelegate.prototype._updateTaskCount http://localhost:8333/dist/lib/zone.js:461:17 Zone.prototype._updateTaskCount http://localhost:8333/dist/lib/zone.js:285:34 Zone.prototype.runTask http://localhost:8333/dist/lib/zone.js:205:25 drainMicroTaskQueue http://localhost:8333/dist/lib/zone.js:595:25 ZoneTask.invokeTask http://localhost:8333/dist/lib/zone.js:500:21 ZoneTask/this.invoke http://localhost:8333/dist/lib/zone.js:485:28 timer http://localhost:8333/dist/lib/zone.js:2054:17

Multiple tinymce on a single page

When I have multiple tinymce editor on a single page the library connects cloud as many as editor i have on the page. (example: 3 editor element means 3 connections to cloud). How can I prevent this?

Not work, help please.

I according the guide setup tinymce in my project, but got that.

Is something I missed?

Build error with Angular 6.0.2

I've integrated the package following the guide (https://www.tinymce.com/docs/integrations/angular2/)
The build now returns this error:

`ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/@tinymce/tinymce-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

i ｢wdm｣: Failed to compile.`

It means that tinymce-angular is not supported on Angular 6?

empty textArea not fit

how to fix this issue

Editor is unusable after initial rendering

I have an issue that seems similar to #9, where the first time the editor is displayed it works fine, but in subsequent uses most of the editor is visible (the toolbars and menus are visible) but the body of the editor is not visible nor editable. From what I can see the iframe element is being rendered into the view, but what I notice is that the body element inside of the iframe is not initialized (for a lack of a better description) in the same way the 2nd time around. The second time the editor is displayed, the body element is completely bare, just: <body><body> with no content or attributes.

This editor is contained within a kendo ui dialog component, and it's when the dialog is dismissed and then displayed again that it breaks.

It is no docs for ability to load tinyMCE from node_modules through tinymce-angular component

I try to change the image plugin. but I expect that tinyMCE-angular loads from a cloud and I can't access to changing anything. So, I investigate how I can load it from local node_modules or assets. And it is no way to do this with this project. Docs refer only to https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/ where no info how to do this in angular exactly because module adds cloud link to in all cases.
Can you help me? Any ideas?

The editor's content is a blank text-area when setting the id

When giving the editor an id <editor id="myid" ></editor> it gives it an initial value of <textarea id="myid"></textarea>

demo

Does only display a textarea, no menu, no wysiwig

Hi,

just installed tinyMCE, following the doc, but not much to see just a resizable textarea

using angular 5.2.0

how do I fix this ?

regards