alfresco-ng2-components/docs/process-services-cloud/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.

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 )
placeholder	string	''	Placeholder displayed when the content of the editor is empty (follow the official documentation )
autofocus	boolean	false	Set a Caret to the Editor after initialization (follow the official documentation )
readOnly	boolean	false	If true users won't have the ability to change the document content