Word document upload issue

[nishthaatharva]

While uploading word document if the words are center aligned in word document then after upload it lost the center position.

Below is the code snippets for it and also attached doc image.

<quill-editor [(ngModel)]="editorContent" [theme]="'snow'" [modules]="editorConfig" [placeholder]="placeholder" (onEditorCreated)="onEditorCreated($event)"

     editorConfig: any = {
toolbar: {
  container: [
    [{ font: [] }],
    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
    ['blockquote', 'code-block'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
    [{ direction: 'rtl' }], // text direction
    [{ align: [] }],
    ['link', 'image', 'video'],
    ['clean'], // remove formatting button
    ['customUpload'], // Custom button
  ],
  handlers: {
    customUpload: this.uploadFile.bind(this), // Custom handler for upload
  },
},

};

async uploadFile() { const input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('accept', '.doc,.docx'); input.click();

input.onchange = async () => {
  const file = input.files![0];
  const fileType = file.name.split('.').pop()?.toLowerCase();

  if (fileType === 'doc' || fileType === 'docx') {
    await this.handleDOCX(file);
  } else {
    alert('Unsupported file type');
  }
};

}

async handleDOCX(file: File) { try { const htmlContent = await this.docxToHtmlService.convertDocxToHtml(file);

  // Insert HTML content into Quill editor
  const range = this.quillEditor!.getSelection(true);
  this.quillEditor!.clipboard.dangerouslyPasteHTML(
    range.index,
    htmlContent
  );
} catch (error) {
  console.error('Error processing DOCX file:', error);
  alert(
    'There was an error processing the DOCX file. Please ensure the file is not corrupted and try again.'
  );
}

}

[sheikh-hassan]

[(ngModel)]="editorContent" this is working means when you type and edit data in the editor box does you get the value I got empty string

[nishthaatharva]

@sheikh-hassan I am able to bind data in editor but lost the alignment of the text

[sheikh-hassan]

@nishthaatharva I am unable to bind data using ngModel and onContentChanged can you guide me for this issue you can also see I has also posted a issue

[KillerCodeMonkey]

Sorry, but since the issue is produced by a custom module/format and toolbar button i think I can not really help you.

Quilljs only allows known formats with css and inline styling.

Your approach to just paste random HTML will not work, because quilljs is not a plain HTML editor.

It is a wysiwyg editor and only supports basic set of formats out of the box. It will strip everything unknown.

And please never store HTML representation to the database. Therefore quill is using Deltas.

In ngx-quill it would be the object/json representation

[KillerCodeMonkey]

@nishthaatharva I am unable to bind data using ngModel and onContentChanged can you guide me for this issue you can also see I has also posted a issue

Just checkout the Demo repo. There you have working examples for many use cases.