alfresco-ng2-components/docs/core/components/rich-text-editor.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
Rich Text Editor component	v1.0.0	Active	2020-07-20

Rich Text Editor component

Wrap Editor.js element to show a Rich Text editor allows to add formatted text.

Contents

• Basic usage
• Class members
  • Properties

Basic usage

app.component.html

<adf-rich-text-editor [data]="data" #editor> </adf-rich-text-editor>
<button (click)="saveContent()">Save</button>

app.component.ts

@Component({...})
export class RichTextEditorDemo {

    @ViewChild('editor')
    editorRef;

    data = {
        time: 1658154611110,
        blocks: [
            {
                id: '99jwc03ETP',
                type: 'header',
                data: {
                    text: 'Header',
                    level: 2
                }
            },
            {
                id: 'ffdulIdU1E',
                type: 'paragraph',
                data: {
                    text: 'Sample paragraph',
                    alignment: 'left'
                }
            },
        ],
        version: 1
    };

    async saveContent(){
        try {
            const editorContent = await this.editorRef.getEditorContent();
            // do some stuff with editor content
        } catch (error) {
            // catch error
        }
    }

}

Class members

Properties

Name	Type	Default value	Description
data	OutputData	null	EditorJs data format (follow the official documentation )
readOnly	boolean	false	If true users won't have the ability to change the document content