cipchk / ngx-tinymce

Angular for tinymce

ngx-tinymce

Tinymce Components build with Angular.

DEMO

• Github
• Stackblitz

Installation instructions

Install ngx-tinymce from npm

npm install ngx-tinymce --save

Recommend: You will need tinymce.min.js file via Build Customizer generate.

Import the ngx-tinymce in to your root AppModule.

import { NgxTinymceModule } from 'ngx-tinymce';

@NgModule({
  imports: [
    NgxTinymceModule.forRoot({
      // Local assets
      baseURL: './assets/tinymce/',
      // or cdn
      baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/'
    })
  ]
})
export class AppModule { }

If the local path should be adding assets configuration in angular.json:

"assets": [
  {
    "glob": "**/tinymce.min.js",
    "input": "./node_modules/tinymce",
    "output": "assets/tinymce/"
  }
]

Standalone

@Component({
  template: `<tinymce />`,
  standalone: true,
  imports: [TinymceComponent],
})
export class App

Globa config:

bootstrapApplication(AppComponent, {
  providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})]
});

Usage

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<tinymce [(ngModel)]="html"></tinymce>`
})
export class AppComponent  {
  html = ``;
}

How to use it with:

• angular-cli please refer to Installation instructions.
• stackblitz sample available here.

API

Name	Type	Default	Summary
config	any		see configure
loading	string,TemplateRef	-	Loading status of tinymce
disabled	boolean	false	Set tinymce mode is readonly if true
inline	boolean	false	Inline editor
delay	number	0	Delayed rendering, unit is 'millisecond'
placeholder	string	-	Placeholder for tinymce, NOTE: dependent on tinymce-placeholder
ready	EventEmitter<any>	-	Tinymce ready callback

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

ngx-tinymce's Issues

ngx-tinymce怎么初始化，tab和reuse这种切换之后就有问题了，是否需要重新初始化一下。

使用最新的tinymce6.X版本，会报错

报错内容如下：
Unhandled Promise rejection: this._instance.setMode is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: this._instance.setMode is not a function
at d:\Work\Project\hongshan_scrm-web-pc\node_modules\ngx-tinymce\fesm2020\ngx-tinymce.mjs:130:60
at _ZoneDelegate.invoke (d:\Work\Project\hongshan_scrm-web-pc\node_modules\zone.js\fesm2015\zone.js:372:26)
at Zone.run (d:\Work\Project\hongshan_scrm-web-pc\node_modules\zone.js\fesm2015\zone.js:134:43)
at NgZone.runOutsideAngular (d:\Work\Project\hongshan_scrm-web-pc\node_modules@angular\core\fesm2020\core.mjs:26190:28)
at TinymceComponent.setDisabled (d:\Work\Project\hongshan_scrm-web-pc\node_modules\ngx-tinymce\fesm2020\ngx-tinymce.mjs:130:21)
at yA.init_instance_callback (d:\Work\Project\hongshan_scrm-web-pc\node_modules\ngx-tinymce\fesm2020\ngx-tinymce.mjs:102:22)
at :4:342952
at sR (:4:343123)
at :4:351124
at _ZoneDelegate.invoke (http://localhost:4200/polyfills.js:8292:158) {stack: 'TypeError: this._instance.setMode is not a fu…(http://localhost:4200/polyfills.js:8292:158)', message: 'this._instance.setMode is not a function'} TypeError: this._instance.setMode is not a function
at d:\Work\Project\hongshan_scrm-web-pc\node_modules\ngx-tinymce\fesm2020\ngx-tinymce.mjs:130:60
at _ZoneDelegate.invoke (d:\Work\Project\hongshan_scrm-web-pc\node_modules\zone.js\fesm2015\zone.js:372:26)
at Zone.run (d:\Work\Project\hongshan_scrm-web-pc\node_modules\zone.js\fesm2015\zone.js:134:43)
at NgZone.runOutsideAngular (d:\Work\Project\hongshan_scrm-web-pc\node_modules@angular\core\fesm2020\core.mjs:26190:28)
at TinymceComponent.setDisabled (d:\Work\Project\hongshan_scrm-web-pc\node_modules\ngx-tinymce\fesm2020\ngx-tinymce.mjs:130:21)
at yA.init_instance_callback (d:\Work\Project\hongshan_scrm-web-pc\node_modules\ngx-tinymce\fesm2020\ngx-tinymce.mjs:102:22)
at :4:342952
at sR (:4:343123)
at :4:351124
at _ZoneDelegate.invoke (d:\Work\Project\hongshan_scrm-web-pc\node_modules\zone.js\fesm2015\zone.js:372:26)

再次打开会报错 导致 ngmodel绑定的内容无法加载

编辑操作 需要回显 富文本内容 首次打开没有问题,第二次打开
core.js:1427 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of null
TypeError: Cannot read property 'length' of null
at plugin.min.js:1
at yb. (plugin.min.js:1)
at zd.r.fire (tinymce.min.js:2)
at yb.fire (tinymce.min.js:2)
at yb.setContent (tinymce.min.js:2)
at TinymceComponent.writeValue (ngx-tinymce.umd.js:200)
at setUpControl (forms.js:2288)
at eval (forms.js:5638)
at ZoneDelegate.invoke (zone.js:392)
at Object.onInvoke (core.js:4753)
at plugin.min.js:1
at yb. (plugin.min.js:1)
at zd.r.fire (tinymce.min.js:2)
at yb.fire (tinymce.min.js:2)
at yb.setContent (tinymce.min.js:2)
at TinymceComponent.writeValue (ngx-tinymce.umd.js:200)
at setUpControl (forms.js:2288)
at eval (forms.js:5638)
at ZoneDelegate.invoke (zone.js:392)
at Object.onInvoke (core.js:4753)
at resolvePromise (zone.js:824)
at eval (zone.js:876)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at ZoneTask.invokeTask [as invoke] (zone.js:503)
at invokeTask (zone.js:1540)
at HTMLElement.globalZoneAwareCallback (zone.js:1566)

How to give placeholder

Place holder issue in import { NgxTinymceModule } from 'ngx-tinymce';
<tinymce [config]="config">

No way to create custom toolbar button

Is there no way to create a custom toolbar button as described here https://www.tiny.cloud/docs/demo/custom-toolbar-button/?

If I try to add the setup function to the config object, the editor.ui property is undefined.

  config: any = {
    height: 250,
    theme: 'modern',
    plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
    image_advtab: true,
    imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
    templates: [
      { title: 'Test template 1', content: 'Test 1' },
      { title: 'Test template 2', content: 'Test 2' }
    ],
    content_css: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
      '//www.tinymce.com/css/codepen.min.css'
    ],
    setup: function (editor) {
      editor.ui.registry.addButton('customInsertButton', {
      text: 'My Button',
      onAction: function (_) {
        editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
      }
    });
    }
  };

Is it possible to create a custom toolbar button?

Error with latest version - has no exported member 'ɵɵNgModuleDeclaration'.

I'm trying to use the lastest version with angular 10.0.3.
I've got the error bellow.

如何配置图片本地上传

Get cursor position

I am trying to get current cursor position of my text editor...

开启内联模式时会报错。

开启内联模式时会报Could not initialize inline editor on invalid inline target element的错误，
更换标签后也无效，请问是不能开启内联模式还是其他的问题呢。

angular版本是angular8的版本。

延迟加载失效

private initDelay(): void {
if (isSSR) {
return;
}
setTimeout(() => this.init(), Math.min(0, this.delay));
}

math.min应该改为math.max

tinymce js文件加载失败 ?

I followed the instructions for installing and using ngx-tinymce, and it works like a charm :-)
But for some reason I get an error in the console:

Error: tinymce js文件加载失败
"    at TinymceComponent.push../node_modules/ngx-tinymce/fesm5/ngx-tinymce.js.TinymceComponent.init (http://localhost:4200/en/vendor.js:123781:19)
"    at TinymceComponent.push../node_modules/ngx-tinymce/fesm5/ngx-tinymce.js.TinymceComponent.initDelay (http://localhost:4200/en/vendor.js:123775:18)
"    at TinymceComponent.push../node_modules/ngx-tinymce/fesm5/ngx-tinymce.js.TinymceComponent.ngOnChanges (http://localhost:4200/en/vendor.js:123855:18)
"    at checkAndUpdateDirectiveInline (http://localhost:4200/en/vendor.js:59018:19)
"    at checkAndUpdateNodeInline (http://localhost:4200/en/vendor.js:60286:20)
"    at checkAndUpdateNode (http://localhost:4200/en/vendor.js:60248:16)
"    at debugCheckAndUpdateNode (http://localhost:4200/en/vendor.js:60882:38)
"    at debugCheckDirectivesFn (http://localhost:4200/en/vendor.js:60842:13)
"    at Object.updateDirectives (http://localhost:4200/en/main.js:11744:939)
"    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:4200/en/vendor.js:60834:21)

This error only appear when I set the variable containing the config for TinyMCE:

In NgOnInit

this.con.get('TINYMCE').then(res => {
      this.tinyConfig = JSON.parse(res);
});

In html:

<tinymce [(ngModel)]="messageBody" [config]="tinyConfig"></tinymce>

I don't read Chinese, but Google Translate tells me that it means something like "File not loaded".
An I can see that this message is thrown when window.tinymce does not exist.

• I checked in the network tab of debug console that tinymce.min.js is in fact fetched successfully.
• I compared your Stackblitz demo with my code, and I don't see any significant differences.
• I ruled out that this could be an error in my config, by setting it to just {"menubar":false}. The error still appears.
• The error disappear if I do not set the config at all.

As mentioned, TinyMCE is loaded, my config is working, and I can edit and format text. So it seems to work despite this error.
So the question is, why this error appear... and how do I get rid of it?

Versions:

• Angular 7
• TinyMCE 4.9.1
• ngx-tinymce 2.1.1

当值为“”空时显示undifined

ngx-tinymce使用的是7.0.0版本
当值为“”时就会出现如下图所示有个undifined的问题;

我把版本降为2.1.1版本就没有这个问题了，希望可以修复一下

在ie下使用form-group时无法获取值并且值无法回填

这是我的输入值

这是w我的代码
保存成功后值为空

Fix package.json

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Actual behavior

Create a separate package.json for published npm package with peerDependencies instead of dependencies (compare with e.g. @ngrx/platform/modules/store/package.json) in order to avoid the following 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'.
package.json

{
  "name": "ngx-tinymce",
  "version": "1.0.1",
  "license": "MIT",
  "description": "Angular for tinymce",
  "main": "./bundles/ngx-tinymce.umd.js",
  "author": "cipchk",
  "homepage": "https://cipchk.github.io/ngx-tinymce/",
  "bugs": {
    "url": "https://github.com/cipchk/ngx-tinymce/issues"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test -sr -sm=false",
    "test-coverage": "ng test -sr -cc -sm=false",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "demo.gh-pages": "ng build --prod --build-optimizer && gh-pages -d dist",
    "clean:tmp": "rimraf .ng_build .ng_compiled",
    "clean:tmp:lib": "npm run clean:tmp && rimraf .lib",
    "build:copy-sources": "gulp copy-sources",
    "build:inline-resources": "gulp inline-resources",
    "build:ts": "tsc -p tsconfig.publish.json && ngc -p tsconfig.publish.json",
    "build:bundle": "gulp bundle",
    "build:package": "npm-run-all -s clean:tmp:lib build:copy-sources build:ts build:inline-resources build:bundle clean:tmp",
    "version:bump": "gulp bump",
    "release:prepare": "npm run build:package",
    "release:validity": "npm run version:bump && npm run release:prepare",
    "release": "npm run version:bump && npm run release:prepare && npm publish --access=public .lib"
  },
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    ...
  },
  "devDependencies": {
    "@angular/cli": "1.6.0",
    "@angular/compiler-cli": "^5.0.0",
    ...
  }
}

Expected behavior

package.json

{
  "name": "ngx-tinymce",
  "version": "1.0.1",
  "license": "MIT",
  "description": "Angular for tinymce",
  "main": "./bundles/ngx-tinymce.umd.js",
  "author": "cipchk",
  "homepage": "https://cipchk.github.io/ngx-tinymce/",
  "bugs": {
    "url": "https://github.com/cipchk/ngx-tinymce/issues"
  },
  "peerDependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    ...
  }
}

Minimal reproduction of the problem with instructions

yarn add ngx-tinymce
yarn

ngx TinyMCE - Get plain text

Can't find a way to get text from ngx-tinymce as we can do in vanile one. Is there a way to get editor? In component there is no such thing as activeEditor or getContent

const myText = tinyMCE.activeEditor.selection.getContent({ format: 'text' });

bootcss cdn 路径会包含多个 `//` 时无法找到

Fix package json again

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Actual behavior

See #8, i.e. again create a separate package.json for published npm package with peerDependencies instead of dependencies in order to avoid the following compile warning

WARNING in ./node_modules/ngx-tinymce/node_modules/@angular/core/fesm5/core.js
4826:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/ngx-tinymce/node_modules/@angular/core/fesm5/core.js
4838:15-102 Critical dependency: the request of a dependency is an expression

Expected behavior

Compiles without warnings

Minimal reproduction of the problem with instructions

yarn add ngx-tinymce
yarn

package.json

{
  "name": "ngx-tinymce",
  "version": "2.0.1",
  "main": "./bundles/tinymce.umd.js",
  "module": "./esm5/tinymce.js",
  "es2015": "./esm2015/tinymce.js",
  "typings": "./tinymce.d.ts",
  "description": "Angular for tinymce",
  "license": "MIT",
  "author": "cipchk",
  "homepage": "https://cipchk.github.io/ngx-tinymce/",
  "bugs": {
    "url": "https://github.com/cipchk/ngx-tinymce/issues"
  },
  "scripts": {
    "analyze": "ng build --prod --build-optimizer --stats-json",
    "lint": "tslint -p tsconfig.json -c tslint.json 'lib/*/*.ts'",
    "test": "ng test --code-coverage",
    "site:build": "ng build --prod --build-optimizer",
    "site:gh": "ng build --prod --build-optimizer --base-href /ngx-tinymce/ && gh-pages -d ./dist",
    "build": "bash ./build.sh",
    "release:next": "bash ./build.sh && cd publish && npm publish --access public --tag next",
    "release": "bash ./build.sh && cd publish && npm publish --access public"
  },
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    ...
  },
  "devDependencies": {
    ...
  }
}

Disabled function is not working

When we give disabled attribute tinymce errors out with message

this.instance.disabled is not a function

Example stackblitz: https://stackblitz.com/edit/ngx-tinymce-disabledissue

在ng-zorro的modal中使用，组件会渲染失败

详情请见这里
我在Modal中使用tinymce标签，即使加上delay仍然会渲染失败

paste插件疑问

官方给的例子https://codepen.io/anon/pen/XEapoX，插件中添加paste，再加入paste_data_images: true到配置中，是可以复制粘贴图片。

但在这里面的例子https://stackblitz.com/edit/ngx-tinymce?file=app%2Fapp.component.ts，添加同样的配置却无法粘贴图片。

tinymce版本是4.7.9。

nz-card-tab 、modal中不显示

1、置于非默认nz-card-tab中，tab切换后不显示。
2、置于nz-modal中，第一次打开modal可以显示，第二次打开modal不显示。

ngx-tinymce组件，第二次打开页面不显示

我用的ng-alain curd ，list打开modal包含tinymce，第一次显示，第二次就是空白了，tinymce控件都不显示，后来按照上边的加了delay=100就可以了，1000有点长，100就可以。作者可以自己在list上加个按钮打开modal显示tinymce试试。

Cannot read property 'events' of null - (cipchk/ngx-editor v1.0.1)

There is a issue in version 1.0.1 (Latest Version). I here attached a screen shots of web console. Also I have debugged the JS file. "this.router" is assigning a null value. And also version 1.0.0 is working correctly.

webpack sample

tried to insert it a project using webpack, but I'm unable to run it. Someone is running it?

after installing this lab i got below error while compile on angula 4.4

node_modules/ngx-tinymce/src/tinymce.component.d.ts (25,9): An accessor cannot be declared in an ambient context.

这个能支持本地图片上传吗？