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({...})
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

NameTypeDefault valueDescription
dataOutputDatanullEditorJs data format (follow the official documentation )
readOnlybooleanfalseIf true users won't have the ability to change the document content

© 2023 Alfresco Software, Inc. All Rights Reserved.