I'm using dx-html-editor (by DevExtreme) to have a WYSIWYG text editor.
I wish I had the chance to add hr tags to the content but it doesn't seem to be available in the default toolbar
Here's what I have so far:
<dx-html-editor [height]="290" [(value)]="this.item.content">
<dxo-toolbar [multiline]="true">
<dxi-item name="undo"></dxi-item>
<dxi-item name="redo"></dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="bold"></dxi-item>
<dxi-item name="italic"></dxi-item>
<dxi-item name="strike"></dxi-item>
<dxi-item name="underline"></dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="orderedList"></dxi-item>
<dxi-item name="bulletList"></dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="header" [acceptedValues]="[false, 1, 2, 3, 4, 5]"
[options]="{ inputAttr: { 'aria-label': 'Header' } }">
</dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="color"></dxi-item>
<dxi-item name="background"></dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="link"></dxi-item>
<dxi-item name="image"></dxi-item>
<dxi-item name="separator"></dxi-item>
<dxi-item name="insertTable"></dxi-item>
<dxi-item name="deleteTable"></dxi-item>
<dxi-item name="insertRowAbove"></dxi-item>
<dxi-item name="insertRowBelow"></dxi-item>
<dxi-item name="deleteRow"></dxi-item>
<dxi-item name="insertColumnLeft"></dxi-item>
<dxi-item name="insertColumnRight"></dxi-item>
<dxi-item name="deleteColumn"></dxi-item>
</dxo-toolbar>
<dx-validator>
<dxi-validation-rule type="required" i18n-message message="Content is required">
</dxi-validation-rule>
</dx-validator>
<!-- Media Resizing -->
<dxo-media-resizing [enabled]="true"></dxo-media-resizing>
<dxo-image-upload [tabs]="['file']" fileUploadMode="base64">
</dxo-image-upload>
</dx-html-editor>