Text editor's toolbar location in Angular project

[lostinthemist]

I am using TinyMCE text editor in Angular project. I have followed all steps in TinyMCE Angular integration quick start guide and used TinyMCE Self-hosted method. So far following these steps went nice and fairly simple text editor pops up in my project as it should. My project uses the version "@tinymce/tinymce-angular": "^7.0.0" and Angular itself is version 15.

I am having a problem with toolbar location. I need to set it below the text editor, not above as it is by default. The guide tells me to include toolbar_location: 'bottom' in the options. But if I do that I get an error.

HTML template: <editor [init]="DescriptionTextEditor"></editor>

Typescript file:

export class TextEditorComponent implements OnInit {

public DescriptionTextEditor= {
    base_url: '/tinymce',
    suffix: '.min',
    menubar: false,
    statusbar: false,
    plugins:
        'link lists'
    ,
    toolbar:
        ' bold italic underline | bullist | link | removeformat',
    toolbar_location: 'bottom'
};

constructor() { }

ngOnInit(): void {
}

If I save the file as above, I get an error:

Compiled with problems:

ERROR

src/app/.../description.component.html:9:46 - error TS2322: Type '{ base_url: string; suffix: string; menubar: boolean; statusbar: boolean; plugins: string; toolbar: string; toolbar_location: string; }' is not assignable to type 'RawEditorOptions'. Types of property 'toolbar_location' are incompatible. Type 'string' is not assignable to type 'ToolbarLocation | undefined'.

9 [init]="DescriptionTextEditor"> 
   ~~~~

src/app/.../description.component.ts:7:15 7 templateUrl: './description.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DescriptionComponent.

If I remove toolbar_location: 'bottom' remove the options in TS file then text editor works fine. Only adding this feature breaks it.

[exalate-issue-sync[bot]]

Ref: INT-3094

[jscasca]

Looks like a typescript issue. You need to check where are you getting your RawEditorOptions types and make sure you have the correct version with the correct types

[danoaky-tiny]

What should help is typing your DescriptionTextEditor prop. So like: DescriptionTextEditor: EditorComponent['init'] Because at the moment Typescript is complaining of a mismatched type in toolbar_location.