Angular Typescript CKEDITOR

Question

I am trying to use this inline mode but I am having a lot of problems with it. Some how the style is being removed and I am getting this error about reading 'config'. I wanted to make sure I was setting the config for this control my using the object editor. Any help would be great.

Cannot read properties of undefined (reading 'config')

view

<div class="col-sm-10">
    <div class="controls">
        <textarea id="indicationElementId" 
            formControlName="indicationContent" 
            class="form-control" 
            [(ngModel)]="item.ValueName"
            placeholder="Indication text"
            [class.has-error]="indicationContentNeedsErrorClass">
        </textarea>
    </div>
</div>

ts

CKEDITORInitializer() {
    if ((<any>window).CKEDITOR.instances.indicationElementId)
        (<any>window).CKEDITOR.instances.indicationElementId.destroy(); 
        (<any>window).CKEDITOR.instances["indicationElementId"];
        let editor = (<any>window).CKEDITOR.inline("indicationElementId", {
                keystrokes: [
                    [13 /*Enter*/, 'doNothing'],
                    [(<any>window).CKEDITOR.SHIFT + 13, 'doNothing']
                ],
                enterMode: 2,
                toolbar: [
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Subscript', 'Superscript'] },
                    { name: 'insert', items: ['SpecialChar'] },
                    { name: 'source', items: ['Sourcedialog'] }
                ],
                specialChars: ['&copy;', '&reg;', '&ndash;', '&frac34;', '&ge;', '&le;'],
                removeButtons: '',
                extraPlugins: 'sourcedialog'
        });

        editor.CKEDITOR.config.allowedContent = true;
        editor.CKEDITOR.config.autoParagraph = false;
        editor.CKEDITOR.disableAutoInline = true;

        editor.on("change", () => {
            this.ngZone.run(() => {
                this.item.ValueName = this.getContent();
                this.indicationContentChanged.next(null);
            });

        });

output

Can you try to use ckeditor 5.x? or are you stuck with version 4? If you use version 5.x there are easy install instructions. I have found that the ngx-quill editor works a bit smoother. — rleffler
– rleffler, Commented Mar 29, 2022 at 19:22

viltor · Accepted Answer · 2022-03-28 11:32:03Z

3

+50

the problem is trying to set the config. Can try:

editor.config.set('allowedContent', true);
editor.config.set('autoParagraph', false);
editor.config.set('disableAutoInline', true);

answered Mar 28, 2022 at 11:32

viltor

3412 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jefferson Over a year ago

I get this error TypeError: editor.config.set is not a function at IndicationDictionaryEditDialogComponent.CKEDITORInitializer

viltor Over a year ago

Sorry i didnt read "ckeditor4", can you paste the output of CKEDITOR.instances?

Jefferson Over a year ago

You mean the html that is built?

viltor Over a year ago

no, a console.log(CKEDITOR.instances)

Jefferson Over a year ago

I did a screen print let me know if that is not correct

|

Collectives™ on Stack Overflow

Angular Typescript CKEDITOR

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related