es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

angular quill configuración dinámica

18 Jul, 2023 Programación

Actualmente estoy implementando el editor Quill con Quill-mention en un proyecto de Angular.
Quill-mention debería usar una solicitud HTTP específica de un servicio de empleados implementado:

QuillModule.forRoot({
    modules: {
        mention: {
                allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
                mentionDenotationChars: ["@"],
                source: employeeService.getEmployees()
            }
        }
})

El problema es cómo inyectar esta función del servicio en la configuración de QuillModule.
Ya intenté crear un QuillConfigModule:

@NgModule({
    imports: [
        QuillModule.forRoot()
    ]
})
export class QuillConfigModule {
    static QUILL_CONFIG = {};

    public static forRoot(config: QuillConfig): ModuleWithProviders<QuillConfigModule> {
        return {
            ngModule: QuillConfigModule,
            providers: [
                QuillService,
                {provide: QUILL_CONFIG_TOKEN, useFactory: QuillConfigModule.GET_QUILL_CONFIG},
                { provide: "config", useValue: config }
            ]
        };
    }
}

Incluso parece que la configuración se actualiza, pero el Editor de Quill sigue sin configurarse.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que puede haber un problema con la implementación del módulo QuillConfigModule. Una posible solución podría ser modificar el módulo para proporcionar el servicio de empleado como proveedor:

    @NgModule({
  imports: [
    QuillModule.forRoot({
      modules: {
        mention: {
          allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
          mentionDenotationChars: ["@"],
          source: []
        }
      }
    })
  ],
  providers: [
    {provide: QuillService},
    {provide: MentionConfig, useValue: {
      source: employeeService.getEmployees(),
      items: []
    }}
  ],
})
export class QuillConfigModule { }

    Luego, en el componente donde se utiliza el editor Quill, se puede importar el módulo QuillConfigModule y pasar MentionConfig como una entrada al elemento personalizado:

    import { Component } from "@angular/core";
import { MentionConfig } from "ng-quill-mat-mention";
import { employeeService } from "./employee.service";
import { QuillConfigModule } from "./quill-config.module";

@Component({
  selector: "app-quill-editor",
  template: `
    <quill-editor [modules]="modules"></quill-editor>
  `
})
export class QuillEditorComponent {
  modules = {};

  constructor(private config: QuillConfigModule) {
    this.modules = {
      mention: this.config.MentionConfig
    };
  }
}

    Esto debería permitir que el servicio de empleado se utilice en la configuración del editor Quill.

Comments are closed.