Copy/Paste from source(MS Word) to the editor does not keep the format

[iDcodes]

Hi, can anyone help me with my issue in keeping the format from source like MS Word to paste in the editor? When I am using the demo it does keep the format but when I pasted it on my version its not working.

Here's my code:

• web.html
  <angular-editor id="editor" [(ngModel)]="htmlContent" [config]="editorConfig">
• web.ts
  import { Component, OnInit } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { AngularEditorModule, AngularEditorConfig } from '@kolkov/angular-editor';

@component({
selector: 'app-web-editor',
standalone: true,
imports: [FormsModule, AngularEditorModule, ReactiveFormsModule],
templateUrl: './web-editor.html',
styleUrls: ['./web-editor.css'],
})
export class WebEditor implements OnInit {
htmlContent = '';
title = 'WebEditor';

editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
minHeight: '5rem',
maxHeight: '15rem',
placeholder: 'Enter text here...',
translate: 'no',
sanitize: false,
outline: true,
defaultFontName: 'Comic Sans MS',
defaultFontSize: '5',
defaultParagraphSeparator: 'p',
customClasses: [
{ name: 'quote', class: 'quote' },
{ name: 'redText', class: 'redText' },
{ name: 'titleText', class: 'titleText', tag: 'h1' },
],
toolbarHiddenButtons: [['bold', 'italic']],
};

ngOnInit() {
console.log(this.htmlContent);
}
}

and below is the image of my version with the pasted text which should have the format from the source.

and here's the version of my angular:
"dependencies": {
"@angular/cdk": "^21.0.3",
"@angular/common": "^21.0.6",
"@angular/compiler": "^21.0.6",
"@angular/core": "^21.0.6",
"@angular/forms": "^21.0.6",
"@angular/platform-browser": "^21.0.6",
"@angular/router": "^21.0.6",
"@kolkov/angular-editor": "^3.0.4"
}

[kolkov]

Hi @iDcodes,

Thanks for the detailed code sample!

Your configuration looks correct (sanitize: false should preserve HTML formatting). A few questions to help debug:

1. Which browser are you using? (Chrome, Firefox, Safari, Edge?)
2. Does the official demo work for you? Try pasting from MS Word here: https://angular-editor.kolkov.ru/
3. Can you create a minimal reproduction on StackBlitz? https://stackblitz.com/edit/angular-editor-wysiwyg

Also, please make sure you have provideHttpClient() in your app config (required for standalone components):

// app.config.ts
import { provideHttpClient } from '@angular/common/http';

export const appConfig = {
  providers: [
    provideHttpClient(),
    // ...
  ]
};

Note: MS Word generates proprietary Office HTML (mso-* styles, conditional comments) that browsers may not fully render. The editor passes through whatever the browser provides from the clipboard - it doesn't modify the pasted content when sanitize: false.

Let me know the answers and we can dig deeper!