CODEWITHSUNDEEP
javascriptangulartinymcetinymce-4tinymce-plugins
T. B. - Tantiya Bichchu
T. B. - Tantiya Bichchu

Reputation: 31

Unable to view tinymce editor in my angular project's UI(However it is present in t elements)

I have installed tinymce in my project. I have installed it successfully but when I am trying to use it, it is not displaying on the UI however it is present in the elements when I inspect the area where it should be displaying.

I am attaching both the package.json of my project and an image of the UI.

The Image of the UI:- [1]: https://i.sstatic.net/659mbYUB.png

Please find below my my project's package.json :-

    {
  "name": "cat",
  "version": "1.0.1",
  "license": "MIT",
  "scripts": {
    "build-high": "node --max_old_space_size=7000 ./node_modules/@angular/cli/bin/ng build --prod --output-hashing=all",
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "serve": "set NODE_OPTIONS=--max_old_space_size=8192 & ng serve --open",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node ./replace.build.js && ng build --prod --aot=false",
    "bundle-analyze": "node --max_old_space_size=7000 ./node_modules/@angular/cli/bin/ng build --prod --stats-json && webpack-bundle-analyzer dist/stats-es2015.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@amcharts/amcharts3-angular": "^2.2.4",
    "@amcharts/amcharts4": "^4.10.38",
    "@angular/animations": "^9.1.13",
    "@angular/common": "^9.1.13",
    "@angular/compiler": "^9.1.13",
    "@angular/core": "^9.1.13",
    "@angular/forms": "^9.1.13",
    "@angular/platform-browser": "^9.1.13",
    "@angular/platform-browser-dynamic": "^9.1.13",
    "@angular/router": "^9.1.13",
    "@angular/service-worker": "^9.1.13",
    "@tinymce/tinymce-angular": "^4.2.4",
    "@types/lodash": "^4.14.104",
    "ag-grid-angular": "^25.2.0",
    "ag-grid-community": "^25.2.0",
    "angular2-counto": "^1.2.5",
    "angular2-text-mask": "^9.0.0",
    "angular2-tinymce": "^2.1.2",
    "auth0-js": "^9.24.1",
    "auth0-lock": "^12.4.0",
    "check-peer-dependencies": "^4.3.0",
    "d3": "^4.12.2",
    "d3-scale-chromatic": "^1.3.3",
    "dom-autoscroller": "^2.3.4",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.0.0-rc.7",
    "jspdf": "^2.3.1",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^6.4.1",
    "radial-progress-chart": "0.0.4",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "signalr-no-jquery": "^0.2.0",
    "tinymce": "^7.0.1",
    "tslib": "^1.14.1",
    "underscore.deepclone": "^0.1.3",
    "webpack-bundle-analyzer": "^4.10.1",
    "xlsx": "^0.18.5",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.15",
    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "1.2.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@angular/cdk": "^8.2.3",
    "@angular/cli": "^9.1.15",
    "@angular/compiler-cli": "^9.1.13",
    "@angular/language-service": "^9.1.13",
    "@types/googlemaps": "^3.43.3",
    "@types/jasmine": "^3.7.0",
    "@types/jasminewd2": "^2.0.9",
    "@types/node": "^15.0.2",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "^6.0.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "^3.7.1",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "^7.0.0",
    "replace-in-file": "^6.2.0",
    "ts-node": "^9.1.1",
    "typescript": "^3.8.3",
    "webpack": "^4.46.0"
  }
}

Upvotes: 1

Views: 155

Answers (1)

Fappy
Fappy

Reputation: 96

Based on the limited information you've provided, I suspect there's a missing CSS import in angular.json.

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

If this doesn't resolve it, I would highly recommend to check if you installed and configured the TinyMCE package correctly. https://www.tiny.cloud/docs/tinymce/latest/angular-pm/

Upvotes: 0

Related Questions