How to use ngx-quill - 10 common examples

//
// LibRoutingModule: https://angular.io/guide/router#routing-module-order
//

// import { LibRoutingModule } from './lib-routing.module';
import { LazyLibRoutingModule } from './lazy-lib-routing.module';

@NgModule({
  imports: [
    AngularMaterialModule,
    CommonModule,
    DashboardModule,
    // DragDropModule,
    FlexLayoutModule,
    FlowableModule,
    QuillModule.forRoot({
      placeholder: ''
    }),
    ReactiveFormsModule,
    TranslateModule.forChild(),
    UtilsModule,
    SerendipityComponentsModule,
    DynamicFormsModule,

    // https://angular.io/guide/router#routing-module-order
    // LibRoutingModule
    LazyLibRoutingModule
  ],
  declarations: [
    AccountComponent,
    AccountsComponent,
    ActivitiesComponent,

MatExpansionModule,
		MatDividerModule,
		MatSortModule,
		MatStepperModule,
		MatChipsModule,
		MatPaginatorModule,
		MatDialogModule,
		MatRadioModule,
		MatTreeModule,
		DragDropModule,
		MomentumTableModule,
		ScrollDispatchModule,
		MatMomentDateModule,
		NgJsonEditorModule,
		MatProgressButtonsModule,
		QuillModule.forRoot({
            modules: {
                syntax: true,
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    [{ script: 'sub' }, { script: 'super' }],
                    [{ indent: '-1' }, { indent: '+1' }],
                    ['link', 'image']
                ]
            }
		}),
		NgxChartsModule,
		AngularMarkdownEditorModule.forRoot(),
		MarkdownModule.forRoot()
	],

MatExpansionModule,
		MatDividerModule,
		MatSortModule,
		MatStepperModule,
		MatChipsModule,
		MatPaginatorModule,
		MatDialogModule,
		MatRadioModule,
		MatTreeModule,
		NgJsonEditorModule,
		DragDropModule,
		MomentumTableModule,
		ScrollDispatchModule,
		MatMomentDateModule,
		MatProgressButtonsModule,
		QuillModule.forRoot({
			modules: {
				syntax: true,
				toolbar: [
					['bold', 'italic', 'underline', 'strike'],
					[{ header: [1, 2, 3, 4, 5, 6, false] }],
					[{ list: 'ordered' }, { list: 'bullet' }],
					[{ script: 'sub' }, { script: 'super' }],
					[{ indent: '-1' }, { indent: '+1' }],
					['link', 'image']
				]
			}
		}),
		HighlightModule
	],
	entryComponents: [
		CommandModalComponent,

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RichTextEditorComponent } from './rich-text-editor.component';
import { QuillModule, QUILL_CONFIG_TOKEN, QuillConfig } from 'ngx-quill';
import { FormsModule } from '@angular/forms';
import { RichTextEditorEmojiComponent } from './rich-text-editor-emoji/rich-text-editor-emoji.component';
import { ClickOutsideModule } from 'src/app/shared/directives/click-outside/click-outside.module';

@NgModule({
  declarations: [RichTextEditorComponent, RichTextEditorEmojiComponent],
  imports: [
    CommonModule,
    FormsModule,
    ClickOutsideModule,
    QuillModule.forRoot(),
  ],
  exports: [
    RichTextEditorComponent
  ]
})
export class RichTextEditorModule {
  static configure(config: QuillConfig): ModuleWithProviders  {
    return {
      ngModule: RichTextEditorModule,
      providers: [
        { provide: QUILL_CONFIG_TOKEN, useValue: config }
      ]
    };
  }
}

})
export class DemoTTAppComponent {}

@NgModule({
  declarations: [DemoTTAppComponent, HelloPortofino, CustomNavigation, WelcomeComponent, CustomCrud, CustomSearch],
  providers: [
    { provide: NAVIGATION_COMPONENT, useFactory: DemoTTAppModule.navigation },
  ],
  imports: [
    PortofinoModule.withRoutes([{ path: "hello", component: HelloPortofino }]), PortofinoUpstairsModule,
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule, HttpClientModule, ReactiveFormsModule,
    MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule, MatDatepickerModule, MatDialogModule,
    MatDividerModule, MatExpansionModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule,
    MatPaginatorModule, MatProgressBarModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSnackBarModule,
    MatSortModule, MatTableModule, MatTreeModule, MatToolbarModule, MatMomentDateModule, ScrollingModule,
    FileInputAccessorModule, NgxdModule, QuillModule.forRoot(),
    TranslateModule.forRoot()],
  entryComponents: [ CustomNavigation, WelcomeComponent, CustomCrud, CustomSearch ],
  bootstrap: [DemoTTAppComponent]
})
export class DemoTTAppModule {
  static navigation() {
    return DefaultNavigationComponent
    //return CustomNavigation
  }
}

`
})
@PortofinoComponent({ name: 'welcome' })
export class WelcomeComponent extends Page {}

@NgModule({
  declarations: [AppComponent, WelcomeComponent],
  providers: [],
  imports: [
    PortofinoModule.withRoutes([]), PortofinoUpstairsModule,
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule, HttpClientModule, ReactiveFormsModule,
    MatAutocompleteModule, MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule,
    MatIconModule, MatInputModule, MatMenuModule, MatPaginatorModule, MatRadioModule, MatSelectModule, MatSidenavModule,
    MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule, MatMomentDateModule,
    FileInputAccessorModule, QuillModule.forRoot(), TranslateModule.forRoot()],
  entryComponents: [WelcomeComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { QuillModule } from "ngx-quill";

import { panelWidgetUnitSiteList, panelWidgetUnitSiteModuleList } from "../panel-widget/all-widget-unit";
import { ShareModule } from "@ng-share";
import { environment } from "environments/environment";

@NgModule({
    imports: [
        CommonModule,
        ShareModule,
        DraggableModule,
        MyColorPickerModule,
        MousemoveoutModule,
        DragulaModule,
        NgxAmapModule.forRoot({ apiKey: environment.mapApiKey }),
        QuillModule.forRoot({
            modules: {
                toolbar: [
                    ["bold", "italic", "underline", "strike"],
                    ["blockquote", "code-block"],
                    [{ header: 1 }, { header: 2 }],
                    [{ list: "ordered" }, { list: "bullet" }],
                    [{ script: "sub" }, { script: "super" }],
                    [{ indent: "-1" }, { indent: "+1" }],
                    [{ direction: "rtl" }],
                    [{ size: ["small", false, "large", "huge"] }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ color: [] }, { background: [] }],
                    [{ font: [] }],
                    [{ align: [] }],
                    ["clean"],
                    ["link", "image", "video"],

beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [ DefaultComponent ],
      imports: [FormsModule, QuillModule],
      providers: QuillModule.forRoot().providers
    }).compileComponents()
    fixture = TestBed.createComponent(DefaultComponent) as ComponentFixture
  }))

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    DynamicComponentLoaderModule.forRoot(dynamicComponents),
    SharedModule,
    CookieModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useClass: TranslationsLoader,
        deps: [HttpClient]
      }
    }),
    DrawerModule.forRoot(),
    QuillModule.forRoot()
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initSettings,
      deps: [RouteConfigService],
      multi: true
    },
    {
      provide: ErrorHandler,
      useClass: AppErrorHandler
    },
    {
      provide: AUTOSUGGEST_CONFIG,
      useValue: {endPoint: config.autoSuggestApi, page: 0, searchPageUrl: 'search-result-page'}
    }

NoToolbarComponent,
    CustomToolbarComponent,
    FormatObjectComponent,
    FormatTextComponent,
    NoSanitizeHtmlComponent,
    FormatJsonComponent,
    FormatHtmlComponent,
    PreserveWhitespaceComponent,
    QuillApiEmbedComponent,
    ViewComponent,
    ViewHTMLComponent,
    ModelValidation
  ],
  imports: [
    BrowserModule,
    QuillModule.forRoot(),
    ChildModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: []
})
export class AppModule { }