### Install Project Dependencies

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Run this command in the project's root directory to install all necessary npm packages.

```bash
$ npm install
```

--------------------------------

### Manual Froala Editor Initialization

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/00-START-HERE.md

Control the Froala editor's lifecycle manually. This example shows how to start the editor using a button click and how to capture the initialization event.

```html
<button (click)="controls.initialize()">Start</button>
<div [froalaEditor] (froalaInit)="onInit($event)"></div>
```

--------------------------------

### FroalaInit EventEmitter Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Shows how to use the froalaInit EventEmitter to get access to the InitializationControls object once the editor is ready. This allows for programmatic interaction with the editor instance.

```typescript
// froalaInit output
@Output() froalaInit: EventEmitter<Object>;

// Usage in template
<div (froalaInit)="onInit($event)"></div>

// Usage in component
onInit(controls: any) {
  this.editor = controls.getEditor();
}
```

--------------------------------

### Complete Angular Application Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/fe-root-module.md

This example demonstrates how to integrate the Froala WYSIWYG editor into an Angular application using reactive forms. It includes setup for editing content with `froalaEditor` and displaying content with `froalaView`.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FERootModule } from 'angular-froala-wysiwyg';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

interface Article {
  id: number;
  title: string;
  content: string;
}

@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h1>Article Manager</h1>
      
      <form [formGroup]="form" (ngSubmit)="saveArticle()">
        <input
          type="text"
          placeholder="Article Title"
          formControlName="title"
          class="form-control">
        
        <label>Article Content</label>
        <div
          [froalaEditor]="editorOptions"
          formControlName="content"
          [(froalaModel)]="form.get('content')?.value">
        </div>
        
        <button type="submit" [disabled]="form.invalid">Save Article</button>
      </form>
      
      <hr>
      
      <div *ngFor="let article of articles" class="article-card">
        <h2>{{ article.title }}</h2>
        <div [froalaView]="article.content"></div>
      </div>
    </div>
  `,
  styles: [
    `
    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
    }
    .form-control {
      width: 100%;
      margin-bottom: 20px;
      padding: 10px;
    }
    .article-card {
      border: 1px solid #ccc;
      padding: 20px;
      margin-bottom: 20px;
    }
  `]
,
  imports: [FERootModule, CommonModule, ReactiveFormsModule],
  standalone: true
})
export class AppComponent implements OnInit {
  form: FormGroup;
  articles: Article[] = [];
  editorOptions = {
    placeholderText: 'Write your article content...', 
    toolbarButtons: [
      'bold', 'italic', 'underline', '|',
      'formatOL', 'formatUL', '|',
      'insertLink', 'insertImage', '|',
      'undo', 'redo'
    ],
    charCounterCount: true
  };
  
  constructor() {
    this.form = new FormGroup({
      title: new FormControl('', Validators.required),
      content: new FormControl('', Validators.required)
    });
  }
  
  ngOnInit() {
    this.loadArticles();
  }
  
  loadArticles() {
    this.articles = [
      {
        id: 1,
        title: 'Sample Article',
        content: '<h2>Introduction</h2><p>This is sample content.</p>'
      }
    ];
  }
  
  saveArticle() {
    if (this.form.valid) {
      const newArticle: Article = {
        id: this.articles.length + 1,
        title: this.form.get('title')?.value,
        content: this.form.get('content')?.value
      };
      this.articles.push(newArticle);
      this.form.reset();
    }
  }
}

```

--------------------------------

### Clone Angular Starter and Install Dependencies

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Clones the Angular starter project and installs its dependencies, including specific versions of rxjs and @types/node.

```bash
git clone --depth 1 https://github.com/AngularClass/angular-starter.git
cd angular-starter
npm install
npm install rxjs@6.0.0 --save
npm install @types/node@10.1.4
```

--------------------------------

### Install Ionic CLI and Create Ionic App

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Installs the Ionic CLI globally and creates a new blank Ionic application. This is a prerequisite for Ionic projects.

```bash
npm install -g cordova ionic
ionic start sample blank
cd sample
```

--------------------------------

### Run Demo Application

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Use this command to start the demo application after building it. This is useful for testing changes during development.

```bash
$ npm run start
```

--------------------------------

### Angular Froala Editor Installation Checklist

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/00-START-HERE.md

A step-by-step checklist for installing and configuring the angular-froala-wysiwyg package. Ensure all steps are completed for successful integration.

```bash
☐ npm install angular-froala-wysiwyg froala-editor
☐ Add FroalaEditorModule to imports
☐ Add CSS to angular.json styles
☐ Add [froalaEditor] directive to template
☐ Bind [(froalaModel)] to component property
☐ Test in browser
```

--------------------------------

### Example Editor Options Configuration

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Demonstrates how to configure the Froala editor using an options object. This example sets placeholder text, enables character count, disables immediate model updates, specifies ignored attributes, and defines basic toolbar buttons and event handlers.

```typescript
const options: any = {
  placeholderText: 'Edit your content here',
  charCounterCount: true,
  immediateAngularModelUpdate: false,
  angularIgnoreAttrs: ['class', 'id'],
  toolbarButtons: ['bold', 'italic', 'underline'],
  events: {
    'focus': (e, editor) => console.log('Focused'),
    'contentChanged': () => console.log('Changed')
  }
};
```

--------------------------------

### Install angular-froala-wysiwyg

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Install the angular-froala-wysiwyg package using npm. This is the initial step for integrating the editor.

```bash
npm install angular-froala-wysiwyg
```

--------------------------------

### Input Model Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Example of an input model object for [(froalaModel)], specifying placeholder, type, and value.

```typescript
inputModel: any = {
  placeholder: 'Enter text',
  type: 'text',
  value: 'default'
};
```

--------------------------------

### Clone and Install Angular SystemJS Demo App

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Clones a demo application that uses SystemJS and JIT compilation and installs its dependencies.

```bash
git clone https://github.com/froala/angular-froala-systemjs-demo
cd angular-froala-systemjs-demo
npm install
```

--------------------------------

### Install angular-froala-wysiwyg and froala-editor

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

Install the necessary packages for the Angular Froala WYSIWYG editor. Font Awesome is optional for toolbar icons.

```bash
npm install angular-froala-wysiwyg froala-editor
npm install font-awesome  # Optional
```

--------------------------------

### Install Froala Editor Package

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/integration-guide.md

Verify that the froala-editor package is installed using npm to resolve editor initialization issues.

```bash
npm install froala-editor
```

--------------------------------

### Run Webpack App

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Command to start the development server for the Webpack-based Angular application.

```bash
npm run start
```

--------------------------------

### Button Model Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Example of a button model object for [(froalaModel)], including innerHTML and class attributes.

```typescript
buttonModel: any = {
  innerHTML: 'Click Me',
  class: 'btn-primary'
};
```

--------------------------------

### Image Model Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Example of an image model object for [(froalaModel)], specifying src, alt, and width attributes.

```typescript
imgModel: any = {
  src: 'path/to/image.jpg',
  alt: 'Description',
  width: '200'
};
```

--------------------------------

### Install Froala Editor Dependencies

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/fe-root-module.md

Install the necessary packages for Froala Editor and its Angular integration using npm.

```bash
npm install angular-froala-wysiwyg froala-editor
```

--------------------------------

### Install Font Awesome for Toolbar Icons

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/integration-guide.md

Optionally, install Font Awesome if you want to use enhanced icons in the Froala toolbar.

```bash
npm install font-awesome
```

--------------------------------

### Froala Model for Regular Elements

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-editor-directive.md

Example of setting the initial content for a Froala editor instance on a regular HTML element using the `froalaModel` input.

```html
froalaModel = '<p>This is <strong>bold</strong> text</p>';
```

--------------------------------

### Manual Editor Initialization Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Demonstrates how to use the InitializationControls to manually initialize and destroy the Froala editor instance. This is useful for controlling the editor's lifecycle explicitly.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-manual-init',
  template: '
    <button (click)="controls.initialize()">Initialize</button>
    <button (click)="controls.destroy()">Destroy</button>
    <div [froalaEditor] (froalaInit)="onInit($event)"></div>
  ',
  standalone: false
})
export class ManualInitComponent {
  controls: any;
  
  onInit(initControls: any) {
    this.controls = initControls;
  }
}
```

--------------------------------

### Link Model Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Example of a link model object for [(froalaModel)], including href, target, and title attributes.

```typescript
linkModel: any = {
  href: 'https://example.com',
  target: '_blank',
  title: 'Link title'
};
```

--------------------------------

### Blog Post Display

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

Renders a blog post's content using the Froala View module. This example defines an interface for blog posts and initializes a sample post in `ngOnInit`.

```typescript
import { Component, OnInit } from '@angular/core';

interface BlogPost {
  id: number;
  title: string;
  content: string;
  author: string;
  date: Date;
}

@Component({
  selector: 'app-blog-post',
  template: `
    <article>
      <header>
        <h1>{{ post.title }}</h1>
        <p class="meta">By {{ post.author }} on {{ post.date | date }}</p>
      </header>
      <div class="content" [froalaView]="post.content"></div>
    </article>
  `,
  imports: [FroalaViewModule],
  standalone: true
})
export class BlogPostComponent implements OnInit {
  post: BlogPost;
  
  ngOnInit() {
    this.post = {
      id: 1,
      title: 'Sample Post',
      content: '<h2>Heading</h2><p>Paragraph content...</p>',
      author: 'John Doe',
      date: new Date()
    };
  }
}
```

--------------------------------

### Basic Angular Froala Editor Setup

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/usage-patterns.md

Sets up a minimal Froala WYSIWYG editor instance in an Angular component. Ensure FroalaEditorDirective is imported.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-simple-editor',
  template: `
    <div [froalaEditor] [(froalaModel)]="content"></div>
  `,
  imports: [FroalaEditorDirective],
  standalone: true
})
export class SimpleEditorComponent {
  content = '';
}
```

--------------------------------

### Basic Angular Froala Editor Setup

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/00-START-HERE.md

Demonstrates the fundamental integration of Froala Editor within an Angular component. It shows how to import the module, define editor options, bind content using froalaModel, and display a preview using froalaView.

```typescript
import { Component } from '@angular/core';
import { FroalaEditorModule } from 'angular-froala-wysiwyg';

@Component({
  selector: 'app-editor',
  template: '
    <div [froalaEditor]="options" [(froalaModel)]="content"></div>
    <h2>Preview</h2>
    <div [froalaView]="content"></div>
  ',
  imports: [FroalaEditorModule],
  standalone: true
})
export class EditorComponent {
  options = {
    placeholderText: 'Edit your content here...'
  };
  
  content = '<p>Initial content</p>';
}
```

--------------------------------

### Usage in Feature Module

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

Example of importing FroalaViewModule.forRoot() in a feature module.

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FroalaViewModule } from 'angular-froala-wysiwyg';
import { ContentComponent } from './content.component';

@NgModule({
  declarations: [ContentComponent],
  imports: [
    CommonModule,
    FroalaViewModule.forRoot()
  ]
})
export class ContentFeatureModule { }
```

--------------------------------

### Usage in Root Module

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

Example of importing FroalaViewModule.forRoot() in the root AppModule.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FroalaViewModule } from 'angular-froala-wysiwyg';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FroalaViewModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

--------------------------------

### Accessing Editor Instance Methods

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Demonstrates how to get an editor instance and use its methods to manipulate HTML content, retrieve selection, and perform undo/redo operations.

```typescript
const editor = initControls.getEditor();

// Get HTML
editor.html.get();

// Set HTML
editor.html.set('<p>content</p>');

// Get selection
editor.selection.text();

// Undo/Redo
editor.undo.undo();
editor.undo.redo();
editor.undo.reset();
```

--------------------------------

### Install angular-froala-wysiwyg via npm

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Installs the Froala Wysiwyg Editor Angular component using npm. Ensure you are using the latest versions of Ionic and Angular.

```bash
npm install angular-froala-wysiwyg --save
```

--------------------------------

### Basic Froala Editor Setup

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/configuration.md

Sets up a basic Froala WYSIWYG editor instance with a placeholder. Ensure the Froala editor module is imported in your Angular application.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-basic-editor',
  template: `<div [froalaEditor]="options" [(froalaModel)]="content"></div>`,
  standalone: false
})
export class BasicEditorComponent {
  options = {
    placeholderText: 'Start typing...'
  };
  
  content = '';
}
```

--------------------------------

### FroalaViewModule

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Documentation for FroalaViewModule, used for rendering rich text content. It includes the forRoot() method for configuration and provides examples for common usage patterns like blog post display and email template preview.

```APIDOC
## FroalaViewModule

### Description

This module is designed for rendering rich text content within Angular applications. It offers the `forRoot()` method for initial configuration and demonstrates common usage patterns, including displaying blog posts, previewing email templates, and managing documents.

### Usage

**NgModule:**
```typescript
import { FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
  imports: [
    FroalaViewModule.forRoot(),
    // ... other modules
  ],
  // ... component declarations
})
export class AppModule { }
```

### Methods

- **forRoot()**: Configures the module with specific options.

### Features

- forRoot() method
- Common usage patterns
- Blog post display example
- Email template preview
- Document management example
```

--------------------------------

### Angular Module Setup (Non-SSR)

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Configure your Angular application's module for Froala integration. This is for applications not using Server-Side Rendering.

```typescript
// Import all Froala Editor plugins.
// import 'froala-editor/js/plugins.pkgd.min.js';

// Import a single Froala Editor plugin.
// import 'froala-editor/js/plugins/align.min.js';

// Import a Froala Editor language file.
// import 'froala-editor/js/languages/de.js';

// Import a third-party plugin.
// import 'froala-editor/js/third_party/font_awesome.min';
// import 'froala-editor/js/third_party/image_tui.min';
// import 'froala-editor/js/third_party/spell_checker.min';
// import 'froala-editor/js/third_party/embedly.min';

// Import Angular plugin.
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@NgModule({
   ... 
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ...
})
```

--------------------------------

### Editor with Preview

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

Displays an editor and its preview side-by-side using Froala Editor and Froala View modules. Requires basic component setup and options for the editor.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-editor-preview',
  template: `
    <div class="container">
      <div class="editor">
        <h2>Editor</h2>
        <div [froalaEditor]="options" [(froalaModel)]="content"></div>
      </div>
      
      <div class="preview">
        <h2>Preview</h2>
        <div [froalaView]="content"></div>
      </div>
    </div>
  `,
  styles: [`
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
  `],
  standalone: false
})
export class EditorPreviewComponent {
  options = {
    placeholderText: 'Edit content...',
    charCounterCount: true
  };
  
  content = '<p>Initial content</p>';
}
```

--------------------------------

### FERootModule

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Documentation for FERootModule, a convenience module that combines FroalaEditorModule and FroalaViewModule. It simplifies application setup and provides a consolidated way to include Froala's functionalities.

```APIDOC
## FERootModule

### Description

FERootModule is a convenience module that combines the functionalities of `FroalaEditorModule` and `FroalaViewModule`. It simplifies the setup process for applications that require both editing and viewing capabilities of the Froala WYSIWYG editor.

### Usage

**NgModule:**
```typescript
import { FERootModule } from 'angular-froala-wysiwyg';

@NgModule({
  imports: [
    FERootModule.forRoot(),
    // ... other modules
  ],
  // ... component declarations
})
export class AppModule { }
```

### Methods

- **forRoot()**: Configures the combined module with specific options.

### Features

- Convenience combined module
- Comparison with individual imports
- Feature modules
- Complete application example
```

--------------------------------

### Create a Service for Froala Editor Configuration

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/integration-guide.md

This service centralizes Froala editor configurations, providing methods to get default, minimal, or full options. Use this to maintain consistent editor settings across your application.

```typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EditorConfigService {
  getDefaultOptions() {
    return {
      placeholderText: 'Edit your content...',
      charCounterCount: true,
      toolbarSticky: false,
      tabSpaces: 2
    };
  }
  
  getMinimalOptions() {
    return {
      placeholderText: 'Quick edit...',
      toolbarButtons: ['bold', 'italic', 'underline', 'undo', 'redo']
    };
  }
  
  getFullOptions() {
    return {
      placeholderText: 'Full editor...',
      toolbarButtons: [
        'bold', 'italic', 'underline', 'strikethrough', '|',
        'fontSize', 'fontFamily', 'color', 'backgroundColor', '|',
        'align', 'formatOL', 'formatUL', 'indent', 'outdent', '|',
        'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|',
        'undo', 'redo', '|',
        'clearFormatting', 'selectAll', 'html'
      ],
      charCounterCount: true,
      imageUploadURL: '/api/upload/image',
      videoUploadURL: '/api/upload/video'
    };
  }
}
```

--------------------------------

### Angular CLI Setup for SSR

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Configure your Angular application for Server-Side Rendering (SSR) by importing necessary modules and dynamically loading Froala plugins in the browser context.

```typescript
// Import helpers to detect browser context
import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from "@angular/common";
// Import Angular plugin. 
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
...

@Component({
  ...
  imports: [FroalaEditorModule, FroalaViewModule ... ],
  ...
})

export class AppComponent {
  ...
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    // Import Froala plugins dynamically only in the browser context
    if (isPlatformBrowser(this.platformId)) {
      // Import all Froala Editor plugins.
      // @ts-ignore
      // import('froala-editor/js/plugins.pkgd.min.js');

      // Import a single Froala Editor plugin.
      // @ts-ignore
      // import('froala-editor/js/plugins/align.min.js');

      // Import a Froala Editor language file.
      // @ts-ignore
      // import('froala-editor/js/languages/de.js');

      // Import a third-party plugin.
      // @ts-ignore
      // import('froala-editor/js/third_party/font_awesome.min');
      // @ts-ignore
      // import('froala-editor/js/third_party/image_tui.min');
      // @ts-ignore
      // import('froala-editor/js/third_party/spell_checker.min';
      // @ts-ignore
      // import('froala-editor/js/third_party/embedly.min');
    }
  }
  ...
}
```

--------------------------------

### Froala Editor Configuration Options

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-editor-directive.md

Example of setting Froala Editor configuration options, including standard options and custom Angular extensions like `immediateAngularModelUpdate`.

```typescript
{
  placeholderText: 'Edit Your Content Here!',
  charCounterCount: true,
  toolbarButtons: ['bold', 'italic', 'underline'],
  toolbarInline: true,
  events: {
    'focus': (e, editor) => { },
    'contentChanged': () => { }
  }
}
```

--------------------------------

### Updating FroalaView Content Dynamically

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-directive.md

This example demonstrates how content updates are immediately reflected in the `froalaView` directive. A button click triggers an update to the `content` property, which is then rendered by `froalaView`.

```typescript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-view',
  template: '
    <button (click)="updateContent()">Update Content</button>
    <div [froalaView]="content"></div>
  ',
  standalone: false
})
export class DynamicViewComponent implements OnInit {
  content: string = '';
  
  ngOnInit() {
    this.content = '<p>Initial content</p>';
  }
  
  updateContent() {
    this.content = '<h2>Updated Header</h2><p>New paragraph</p>';
  }
}
```

--------------------------------

### Get/Set Editor Content

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/INDEX.md

Demonstrates how to programmatically get and set the content of the Froala editor instance using both the model binding and the editor's API.

```APIDOC
## Get/Set Editor Content

### Via Model Binding
To set content using the model, directly assign a string to the bound variable:
```typescript
this.content = '<p>New content</p>';
```

### Via Editor Instance
To get or set content directly through the editor instance:
```typescript
// Get the editor instance (assuming 'initControls' is available from froalaInit event)
const editor = initControls.getEditor();

// Set content
editor.html.set('<p>New content</p>');

// Get content
const html = editor.html.get();
```
```

--------------------------------

### Configuring Froala Editor Options

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/00-START-HERE.md

Configure the Froala editor by passing an options object to the directive. This example shows how to set placeholder text, enable character count, and define toolbar buttons.

```typescript
options = {
  placeholderText: 'Type here...',
  charCounterCount: true,
  toolbarButtons: ['bold', 'italic', 'underline']
};

<div [froalaEditor]="options"></div>
```

--------------------------------

### Backend Image Upload Endpoint (Node.js/Express)

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/integration-guide.md

Example of a backend endpoint using Node.js and Express to handle image uploads. It should process multipart/form-data, save the file, and return a JSON object with the image link.

```javascript
app.post('/api/upload/image', (req, res) => {
  // Handle multipart/form-data
  // Save file to storage
  // Return { link: '/path/to/image.jpg' }
  res.json({ link: '/uploads/image.jpg' });
});
```

--------------------------------

### Build Demo Application

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Execute this command to build the demo application for the angular-froala-wysiwyg project.

```bash
$ npm run demo.build
```

--------------------------------

### Reactive Forms Integration with Froala Editor Directive

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-editor-directive.md

Example demonstrating how to integrate the Froala Editor directive into an Angular reactive form. This setup allows for form validation and value management using Angular's FormControl and FormGroup.

```typescript
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-form-editor',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <textarea
        [froalaEditor]="options"
        formControlName="content"
        [(froalaModel)]="form.get('content')?.value">
      </textarea>
      <button type="submit">Submit</button>
    </form>
  `,
  standalone: false
})
export class FormEditorComponent implements OnInit {
  form: FormGroup;
  options = { charCounterCount: true };
  
  constructor() {
    this.form = new FormGroup({
      content: new FormControl('', Validators.required)
    });
  }
  
  ngOnInit() {
    this.form.get('content')?.setValue('<p>Initial content</p>');
  }
  
  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}
```

--------------------------------

### Build and Serve Ionic App

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Commands to build the Ionic application for production and serve it locally for testing.

```bash
ionic build
ionic serve
```

--------------------------------

### Responsive Toolbar Configuration

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Configure different sets of toolbar buttons for various screen sizes (XS, SM, MD, LG) to ensure responsiveness.

```typescript
{
  toolbarButtons: [...],          // Default (lg)
  toolbarButtonsXS: [...],        // Extra small
  toolbarButtonsSM: [...],        // Small
  toolbarButtonsMD: [...],        // Medium
  toolbarButtonsLG: [...]         // Large
}
```

--------------------------------

### Configure Image Upload Options

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/integration-guide.md

Set up the image upload URL, maximum file size, allowed file types, and event handlers for before upload, successful upload, and upload errors.

```typescript
options = {
  imageUploadURL: '/api/upload/image',
  imageMaxSize: 5242880,  // 5MB
  imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif'],
  events: {
    'image.beforeUpload': (files: FileList) => {
      console.log('Uploading:', files);
    },
    'image.uploaded': (result: any) => {
      console.log('Success:', result);
    },
    'image.error': (error: any) => {
      console.log('Error:', error);
    }
  }
};
```

--------------------------------

### Get Editor Instance and HTML Content

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Retrieve the current editor instance and get its HTML content. Useful for saving or processing editor data.

```typescript
const editor = controls.getEditor();
console.log(editor.html.get());
```

--------------------------------

### Full Toolbar Configuration

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Comprehensive toolbar configuration with a wide range of formatting, media, and utility options.

```typescript
toolbarButtons: [
  'bold', 'italic', 'underline', 'strikethrough', '|',
  'fontSize', 'fontFamily', 'color', 'backgroundColor', '|',
  'align', 'formatOL', 'formatUL', 'indent', 'outdent', '|',
  'insertLink', 'insertImage', 'insertVideo', 'insertTable', '|',
  'undo', 'redo', '|',
  'clearFormatting', 'selectAll', 'html'
]
```

--------------------------------

### Minimal Toolbar Configuration

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Use this configuration for a basic toolbar with essential text formatting options.

```typescript
toolbarButtons: ['bold', 'italic', 'underline', 'undo', 'redo']
```

--------------------------------

### FroalaEditorDirective Usage Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/INDEX.md

Demonstrates how to bind configuration, content, and events to the Froala Editor directive in an Angular template.

```html
<div
  [froalaEditor]="options"
  [(froalaModel)]="content"
  (froalaModelChange)="onContentChange($event)"
  (froalaInit)="onInit($event)">
</div>
```

--------------------------------

### Standard Toolbar Configuration

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

A standard set of toolbar buttons including text formatting, alignment, lists, and media insertion.

```typescript
toolbarButtons: [
  'bold', 'italic', 'underline', 'strikethrough', '|',
  'align', 'formatOL', 'formatUL', '|',
  'insertLink', 'insertImage', '|',
  'undo', 'redo'
]
```

--------------------------------

### Remove Default Routing in Ionic App

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Removes the default routing configuration in the app-routing.module.ts file to allow for custom routing setup.

```typescript
{
  path: '', redirectTo: 'home',
  pathMatch: 'full'
}
```

--------------------------------

### Get Selected Text

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

Retrieve the currently selected text within the Froala editor. This method returns an empty string if no text is selected.

```typescript
const editor = controls.getEditor();
const selectedText = editor.selection.text();
```

--------------------------------

### FroalaViewModule

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

The FroalaViewModule provides the FroalaViewDirective. Use `forRoot()` to configure the module.

```APIDOC
## FroalaViewModule

Provides the view directive.

```typescript
FroalaViewModule.forRoot(): ModuleWithProviders<FroalaViewModule>
```
```

--------------------------------

### Froala Model for Special Tags

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-editor-directive.md

Examples of how to use `froalaModel` to bind attributes for special HTML tags like images, buttons, inputs, and anchors.

```typescript
// Image element
imgModel = { src: 'path/to/image.jpg', alt: 'Description' };

// Button element
buttonModel = { innerHTML: 'Click Me', class: 'btn-primary' };

// Input element
inputModel = { placeholder: 'Enter text', type: 'text' };

// Anchor element
linkModel = { href: 'https://example.com', target: '_blank' };
```

--------------------------------

### Initialize FERootModule

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/module-exports.md

Use FERootModule for a convenience import that includes both editor and view modules pre-configured with forRoot(). Import this module in your AppModule.

```typescript
import { FERootModule } from 'angular-froala-wysiwyg';

@NgModule({
  imports: [FERootModule]
})
export class AppModule { }
```

--------------------------------

### Get Editor HTML Content

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

Retrieve the current HTML content from the Froala editor instance. Ensure the editor instance is accessible via `controls.getEditor()`.

```typescript
const editor = controls.getEditor();
const html = editor.html.get();
```

--------------------------------

### Accessing Editor Instance Methods

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

Directly interact with the Froala editor instance to get or set HTML content using its API methods after initialization.

```typescript
private editor: any;

// After onInit
const html = this.editor.html.get();
this.editor.html.set('<p>New content</p>');
```

--------------------------------

### froalaInit Output

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-editor-directive.md

Emits an object containing methods for manual editor control, useful for lazy initialization or programmatic management of the editor instance.

```APIDOC
## froalaInit

### Description
Emits an object containing methods to manually control editor initialization. This is useful for lazy initialization or programmatic control.

### Type
`@Output() froalaInit: EventEmitter<Object>`

### Emitted Object Structure
- **initialize**: `() => void` - Initializes the editor.
- **destroy**: `() => void` - Destroys the editor instance.
- **getEditor**: `() => FroalaEditor | null` - Retrieves the editor instance.

### Example
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-editor',
  template: `
    <button (click)="initControls.initialize()">Initialize</button>
    <button (click)="initControls.destroy()">Destroy</button>
    <button (click)="deleteContent()" [disabled]="!initControls?.getEditor()">
      Delete All
    </button>
    <div [froalaEditor] (froalaInit)="onInit($event)" [(froalaModel)]="content"></div>
  `,
  standalone: false
})
export class EditorComponent {
  content: string = '';
  initControls: any;
  
  onInit(controls: any) {
    this.initControls = controls;
  }
  
  deleteContent() {
    const editor = this.initControls.getEditor();
    if (editor) {
      editor.html.set('');
      editor.undo.reset();
      editor.undo.saveStep();
    }
  }
}
```
```

--------------------------------

### Accessing Content via Two-Way Binding

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

Utilize the `froalaModel` directive for two-way data binding to easily get and set the editor's content.

```typescript
@Component({
  template: `<div [(froalaModel)]="content"></div>`
})
export class Component {
  content: string;
}
```

--------------------------------

### Main Entry Point Exports

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/module-exports.md

Exports from the main entry point of the library, including editor and view modules and directives.

```typescript
export { FroalaEditorDirective } from './editor/editor.directive';
export { FroalaEditorModule } from './editor/editor.module';

export { FroalaViewDirective } from './view/view.directive';
export { FroalaViewModule } from './view/view.module';

export { FERootModule } from './fe-root.module';
```

--------------------------------

### Get/Set Editor Content

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/INDEX.md

Illustrates how to programmatically get and set the HTML content of the Froala editor instance, both via the model and the editor instance API.

```typescript
// Via model
this.content = '<p>New content</p>';

// Via editor instance
const editor = initControls.getEditor();
editor.html.set('<p>New content</p>');
const html = editor.html.get();
```

--------------------------------

### Initialize FroalaViewModule

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/module-exports.md

Use FroalaViewModule.forRoot() for root module initialization of the view directive. Import this module in your AppModule.

```typescript
import { FroalaViewModule } from 'angular-froala-wysiwyg';

@NgModule({
  imports: [FroalaViewModule.forRoot()]
})
export class AppModule { }
```

--------------------------------

### Initialize FroalaEditorModule

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/module-exports.md

Use FroalaEditorModule.forRoot() for root module initialization of the editor. Import this module in your AppModule.

```typescript
import { FroalaEditorModule } from 'angular-froala-wysiwyg';

@NgModule({
  imports: [FroalaEditorModule.forRoot()]
})
export class AppModule { }
```

--------------------------------

### Manual Froala Editor Initialization

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Manually initialize the Froala editor instance using a button and capture the controls via the `froalaInit` event.

```typescript
@Component({
  template: `
    <button (click)="controls.initialize()">Init</button>
    <div [froalaEditor] (froalaInit)="onInit($event)"></div>
  `
})
export class Component {
  controls: any;
  
  onInit(ctrl: any) {
    this.controls = ctrl;
  }
}
```

--------------------------------

### Form Validation with Reactive Forms

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Provides an example of setting up validation rules for the Froala editor's content within an Angular reactive form using `FormControl` and `Validators`.

```typescript
content: new FormControl('', [
  Validators.required,
  Validators.minLength(10)
])
```

--------------------------------

### FroalaModelChange EventEmitter Example

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Illustrates the usage of the froalaModelChange EventEmitter to capture changes in the editor's content. Use this to react to user input and update your component's state.

```typescript
// froalaModelChange output
@Output() froalaModelChange: EventEmitter<any>;

// Usage in template
<div (froalaModelChange)="onModelChange($event)"></div>

// Usage in component
onModelChange(newContent: any) {
  console.log('Content changed:', newContent);
}
```

--------------------------------

### FroalaViewModuleforRoot

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/REFERENCE.md

Provides the view directive. Use forRoot() to configure the module.

```typescript
FroalaViewModule.forRoot(): ModuleWithProviders<FroalaViewModule>
```

--------------------------------

### Listen to Events

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/INDEX.md

Shows how to configure the Froala editor to listen for and respond to various events, such as content changes, focus, and blur.

```APIDOC
## Listen to Events

### Configuration
Event listeners are configured within the editor's options object under the `events` property.

```typescript
options = {
  events: {
    'contentChanged': () => console.log('Content has changed'),
    'focus': () => console.log('Editor focused'),
    'blur': () => console.log('Editor blurred')
  }
};
```
```

--------------------------------

### Extend Froala Editor with Custom Button in Angular

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Add custom functionality to the Froala editor by defining a new icon and registering a command. This example adds an 'alert' button.

```typescript
// Import Froala Editor.
import FroalaEditor from 'froala-editor';

// We will make usage of the Init hook and make the implementation there.
import { Component, OnInit  } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `<div class="sample">
               <h2>Sample 11: Add Custom Button</h2>
               <div [froalaEditor]="options" [(froalaModel)]="content" ></div>
             </div>`,


export class AppComponent implements OnInit{

  ngOnInit () {
    FroalaEditor.DefineIcon('alert', {NAME: 'info'});
    FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      focus: false,
      undo: false,
      refreshAfterCallback: false,

      callback: () => {
        alert('Hello!', this);
      }
    });
  }

  public options: Object = {
    charCounterCount: true,
    toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsXS: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsSM: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
    toolbarButtonsMD: ['bold', 'italic', 'underline', 'paragraphFormat','alert'],
  };
}
```

--------------------------------

### Check Editor Initialization Status

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/quick-reference.md

Verify if the Froala editor has been successfully initialized and is ready for use.

```typescript
const editor = controls.getEditor();
if (editor) {
  console.log('Editor is ready');
}
```

--------------------------------

### Usage in NgModule-Based Applications

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

Demonstrates how to import FroalaViewModule.forRoot() in both the root application module and feature modules.

```APIDOC
## Usage in NgModule-Based Applications

**In Root Module** (`app.module.ts`):

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FroalaViewModule } from 'angular-froala-wysiwyg';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FroalaViewModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

**In Feature Module**:

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FroalaViewModule } from 'angular-froala-wysiwyg';
import { ContentComponent } from './content.component';

@NgModule({
  declarations: [ContentComponent],
  imports: [
    CommonModule,
    FroalaViewModule.forRoot()
  ]
})
export class ContentFeatureModule { }
```
```

--------------------------------

### forRoot() Method

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

The static forRoot() method returns a module configuration object. This configuration is used for importing the module in root or feature modules, providing consistency with FroalaEditorModule.

```APIDOC
## forRoot() Method

```typescript
public static forRoot(): ModuleWithProviders<FroalaViewModule>
```

Returns a module configuration object that can be imported in the root module or feature modules.

**Return Type**:

```typescript
ModuleWithProviders<FroalaViewModule> = {
  ngModule: FroalaViewModule,
  providers: []
}
```

**Returns**: Module with providers configuration for lazy-loaded feature modules.
```

--------------------------------

### Manually Initialize Froala Editor in Angular

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/README.md

Control the Froala editor's lifecycle (create, destroy, get instance) by using the (froalaInit) event and handling the initialization controls in your component.

```typescript
public initialize(initControls) {
  this.initControls = initControls;
  this.deleteAll = function() {
  	this.initControls.getEditor()('html.set', '');
  };
}
```

--------------------------------

### Froala Editor with Angular Reactive Forms

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/types.md

Demonstrates how to integrate the Froala editor with Angular's reactive forms, including form group setup, control access, and template usage.

```typescript
import { FormGroup, FormControl } from '@angular/forms';

// With reactive forms
form = new FormGroup({
  content: new FormControl('', Validators.required)
});

// Value type
formValue: any = form.value;  // { content: string }

// Get method
contentControl: any = form.get('content');  // FormControl
```

```html
<form [formGroup]="form">
  <textarea
    [froalaEditor]="options"
    formControlName="content"
    [(froalaModel)]="form.get('content')?.value">
  </textarea>
</form>
```

--------------------------------

### forRoot() Method Signature

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-view-module.md

The static forRoot() method signature for FroalaViewModule.

```typescript
public static forRoot(): ModuleWithProviders<FroalaViewModule>
```

--------------------------------

### Accessing Froala Editor Instance in Angular

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/froala-editor-directive.md

Shows how to access the underlying Froala Editor instance using the `froalaInit` output event. This allows programmatic control over the editor, such as getting or setting HTML content.

```typescript
import { Component } from '@angular/core';
import FroalaEditor from 'froala-editor';

@Component({
  selector: 'app-editor-access',
  template: '
    <button (click)="getHtml()">Get HTML</button>
    <button (click)="setHtml()">Set HTML</button>
    <div [froalaEditor] (froalaInit)="onInit($event)"></div>
  ',
  standalone: false
})
export class EditorAccessComponent {
  private editor: any;
  
  onInit(controls: any) {
    this.editor = controls.getEditor();
  }
  
  getHtml() {
    if (this.editor) {
      console.log(this.editor.html.get());
    }
  }
  
  setHtml() {
    if (this.editor) {
      this.editor.html.set('<p>New content</p>');
    }
  }
}
```

--------------------------------

### Equivalent Import of Froala Modules

Source: https://github.com/froala/angular-froala-wysiwyg/blob/master/_autodocs/api-reference/fe-root-module.md

Shows the equivalent way to import FroalaEditorModule and FroalaViewModule separately in the root module, which FERootModule simplifies.

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FroalaEditorModule.forRoot(),
    FroalaViewModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```