CODEWITHSUNDEEP
javascriptangular
Abhishek Agarwal
Abhishek Agarwal

Reputation: 180

Editor in Angular

I want to use editor through which a user can generate a html of the text and send it through api and once it created i also show the text , user can enter text and images. i try to used flora editor but in that i am not able to display the images as it converts the image path. i also try to used kolkovangular editor but through it i am not able to align the image i insert for example i want to align the image in center but i am not able to do it.

can somebody please suggest any free good editor or tell me how can i align a image in my text

Upvotes: -1

Views: 303

Answers (1)

Rishab Vaigankar
Rishab Vaigankar

Reputation: 443

you can try https://www.npmjs.com/package/ngx-quill I have s sample code for you https://stackblitz.com/edit/ngx-quill-example-fa6fzy?file=src%2Fapp%2Fapp.component.ts

<div [formGroup]="form">
  <quill-editor formControlName="text" (onSelectionChanged)="onSelectionChanged()">
  </quill-editor>
</div>

<div [innerHTML]="result"></div>

<button (click)="logForm()">Log</button>


import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

import Quill from 'quill';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  result: string;
  quillConfig = {
    toolbar: {
      container: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ size: ['xsmall', 'small', 'medium', 'large', 'xlarge'] }],
        [{ align: [] }],
        ['clean'],
        ['link']
      ]
    }
  };

  constructor() {}

  ngOnInit() {
    this.form = new FormGroup({
      text: new FormControl('<p><strong>Hello</strong> World!</p>')
    });
  }

  public onSelectionChanged(): void {
    this.result = this.form.get('text').value;
  }
}

Upvotes: 2

Related Questions