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.