Saltar al contenido

Integrando el editor de texto Quill en una aplicación Angular

Después de mucho trabajar hemos hallado el resultado de esta pregunta que agunos usuarios de este sitio presentan. Si deseas aportar algún dato puedes aportar tu comentario.

Solución:

Siga estos pasos, debería funcionar:

1- Instalación:

 npm install ngx-quill
 npm install @angular/core
 npm install @angular/common
 npm install @angular/forms
 npm install @angular/platform-browser
 npm install quill
 npm install rxjs — peer dependencies of rxjs-quill
  • incluya estilos de tema: bubble.css, snow.css de quilljs en su index.html, o agréguelos en sus archivos css/scss con @import declaraciones, o agrégueles estilos externos en su proceso de compilación.

Actualice el archivo angular.json con el siguiente código:

  “styles”: [
          “./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
          “src/styles.css”,
          “./node_modules/quill/dist/quill.core.css”,
          “./node_modules/quill/dist/quill.snow.css”
        ],
        “scripts”: [“./node_modules/quill/dist/quill.js”]

impórtalo en tu app.module.ts

   import  QuillModule  from 'ngx-quill'

y en las importaciones agregarlo como abajo

 @NgModule(
  declarations:[],
  imports:[
    CommonModule,
    QuillModule.forRoot(),
  ]
 )

en su archivo component.ts puede modificar el estilo del editor como el siguiente código:

   editorStyle = 
     height: '200px'
   ;

y en su archivo component.html podría llamarlo como el siguiente código:

 

Content *

También puede consultar: https://lifecoders.wordpress.com/angular/quill-rich-text-editor-setup-in-angular-7-8/

y aquí: https://www.npmjs.com/package/ng-quill

Significa que no ha configurado esa biblioteca correctamente, en particular, debería estar importando QuillModule.forRoot() para que todos los proveedores entregados con esta biblioteca estén correctamente inicializados.

@NgModule({
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
...

Por cierto, así es como la documentación nos dice que lo hagamos.

Te mostramos las reseñas y valoraciones de los lectores

Acuérdate de que tienes la capacidad de añadir una valoración justa si atinaste tu cuestión justo a tiempo.

¡Haz clic para puntuar esta entrada!
(Votos: 3 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *