Imperative API
getHTML, exportPDF, setContent, getEditor, and getContent — accessed via ref/ViewChild.
Imperative API
Access the editor instance via ViewChild (Angular), ref (React / Vue), or the Vanilla class
instance:
| Method | Returns | Description |
|---|---|---|
getHTML() | string | Current document as an HTML string |
exportPDF(options?) | Promise<void> | Renders to PDF and triggers browser download |
setContent(html) | void | Replace content programmatically. Vue and Vanilla only — in Angular and React write through the binding. |
getEditor() | Editor | null | Underlying Tiptap instance. Vue / Vanilla only. |
getContent() | string | Current src value (raw HTML). Vue / Vanilla only. |
Call imperative methods only after the editor-ready / (editorReady) event fires, or guard
with optional chaining (ref?.getHTML()). Calling one before the editor mounts throws Cannot read properties of null (reading 'getHTML').
In React, type the ref with ComponentRef<typeof AtelierEditor> (imported from react) — no
extra package needed:
const editorRef = useRef<ComponentRef<typeof AtelierEditor>>(null);
editorRef.current?.getHTML();
editorRef.current?.editor; // the Tiptap instance
void editorRef.current?.exportPDF({ filename: 'report' });If you prefer the concrete element class, AtelierEditorElement is importable from
@innosoft/atelier-editor-core, which is already in your node_modules because the wrapper
depends on it.
PDF export options
await editor.exportPDF({
filename: 'quarterly-report', // '.pdf' appended automatically (default: 'document.pdf')
margin: 10, // mm — or [top, left, bottom, right] (default: 10)
format: 'a4', // jsPDF page format (default: 'a4')
orientation: 'portrait' // 'portrait' | 'landscape' (default: 'portrait')
});Two entry points, same engine: the toolbar button (visible when exportPdf is true) and this
method, which works regardless of the flag.