Блог

Я хочу использовать редактор , с помощью которого пользователь может сгенерировать html-текст и отправить его через api, и как только он будет создан, я также покажу текст, пользователь сможет вводить текст и изображения. я пытаюсь использовать редактор flora, но в этом случае я не могу отображать изображения, так как он преобразует путь к изображению. я также пытаюсь использовать кольковугольный редактор, но с его помощью я не могу выровнять вставляемое изображение, например, я хочу выровнять изображение по центру, но я не могу этого сделать.

может ли кто-нибудь, пожалуйста, предложить какой-нибудь бесплатный хороший редактор или сказать мне, как я могу выровнять изображение в своем тексте

вы можете попробовать https://www.npmjs.com/package/ngx-quill У меня есть пример кода для вас https://stackblitz.com/edit/ngx-quill-example-fa6fzy?file=src/app/app.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;
  }
}