Editor in Angular

Question

我想使用编辑器，用户可以通过它生成文本的html，并通过api发送它，一旦它创建了我也显示文本，用户可以输入文本和图像。我尝试使用植物编辑器，但我无法显示图像，因为它转换图像路径。我也尝试使用kolkovangular编辑器，但通过它，我无法对齐我插入的图像，例如，我想在中心对齐图像，但我无法做到这一点。

谁能建议任何免费的好编辑器或告诉我如何在我的文本对齐图像

Answer 1

您可以尝试https://www.npmjs.com/package/ngx-quill我有5个示例代码为您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;
}
}