Editor does not load - Invalid default value passed for the "toolbar1" option. The value must be a string.

[mandm-pt]

What is the current behavior? I am using free version of tinymce 7 via npm on my angular application. The installation was basically following instructions on this page https://www.tiny.cloud/docs/tinymce/latest/angular-pm/#procedure. When I load the page that contains the editor, I get the following error:

Please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox.io or similar.

import tinymce, { Editor } from 'tinymce';
//...
tinymce.init({
	selector: `#${this.selectorId}`,
	base_url: '/tinymce', // Root for resources
	suffix: '.min',       // Suffix to use when loading resources
	content_css: 'text-editor.content.css',
	resize: false,
	inline: true,// TODO: IF false > breaks comments highlithing feature
	menubar: 'edit view insert format tools table',
	statusbar: false,
	plugins: ['preview',
		'importcss',
		'searchreplace',
		'autolink', // creates auto links when user types URL
		'directionality', // to be compatible with languages LTR and RTL
		'code',
		'visualblocks',
		'visualchars',
		'fullscreen',
		'image',
		'link', // to have support for link
		'media',
		'codesample',
		'table',
		'charmap',
		'pagebreak',
		'nonbreaking',
		'insertdatetime',
		'advlist',
		'lists', // to have support for numlist bullist
		'wordcount',
		'charmap',
		'quickbars', // for selection toolbar
		'emoticons'],
	quickbars_insert_toolbar: '',
	quickbars_selection_toolbar: 'askAiBtn | btnAddComment',
	toolbar: ['undo redo | blocks fontsize | bold italic underline strikethrough | align numlist bullist | link image',
		' table media | outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | print | pagebreak codesample | ltr rtl'],
	extended_valid_elements: 'comment[id]',
	placeholder: translatedPlaceholder,
	directionality: this.directionality,
	contextmenu: 'link image table',
	setup: (editor) => {
		this._editor = editor;
	}
});

What is the expected behavior? Loading the editor correctly

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular?

Works on:

• Firefox 127.0 (64-bit)
• Google Chrome Version 127.0.6533.120 (Official Build) (64-bit)

Does not work:

• Microsoft Edge Version 127.0.2651.98 (Official build) (64-bit)

  "dependencies": {
    "@angular/animations": "^17.3.7",
    "@angular/cdk": "^17.3.7",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@tinymce/tinymce-angular": "^8.0.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.5",
    "@angular/cli": "^17.3.6",
    "@angular/compiler-cli": "^17.3.0",
    "@angular/localize": "^17.3.5",
    "@types/jasmine": "~5.1.0",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "typescript": "~5.4.2"
  },

[cci-feker]

Same error. Files, folders and lines equal with prod and qa env. but I'm getting this error at prod env. I consumed aprox 1 hole day but I couldn't find any reason.

[trevoriancox]

This is not specific to angular. Happens when migrating from tinymce 5 to 6.

[inaitana]

I had the very same problem with tinymce 7.5.0. The solution I found was downgrading tinymce, to 6.8.5 (while keeping tinymce-angular to 8.0.1).

I didn't try previous 7.x versions.

[pm-developer-sk]

I had the same problem today. Also only in EDGE. I found out, that it is caused by browser's cache. EDGE served tinymce resources like theme.min.js from browser's memory cache. Refresh did not help.

Solutions:

1. clear cache by deleting browser history
2. open EDGE in inPrivate/incognito mode
3. programatic solution is to make dynamic base_url in tinymce.init({...}). Add some preffix or suffix so that every build has unique path to tinymce resorces.

tinymce.init({
	selector: `#${this.selectorId}`,
	base_url: `/${buildVersion}/tinymce`, // example of dynamic base_url