Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Typescript CKEDITOR

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')

enter image description here

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

enter image description here

like image 468
Jefferson Avatar asked Sep 16 '25 03:09

Jefferson


1 Answers

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);
like image 156
viltor Avatar answered Sep 17 '25 18:09

viltor