Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mandm-pt opened this issue Aug 15, 2024 · 3 comments

Comments

@mandm-pt
Copy link

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:
image

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
Copy link

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
Copy link

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

@inaitana
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants