All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

PDF Export

The Editor wrapper component provides options for exporting its content to PDF.

For example, you can specify the file name and whether to export all pages, margins, paper size, font, and other elements.

To use the built-in PDF export functionalities:

  1. Include the corresponding command to the tool collection in the toolbar of the Editor.
  2. Configure the export settings through the pdf attribute.

For the complete list of all PDF configuration properties, refer to the API of the Kendo UI Editor widget.

class EditorContainer extends React.Component {
    constructor(props) {
            super(props);
            this.value = props.value;
    }

    render() {
        return (
            <div>
                <Editor value={this.value} tools={["pdf"]} pdf={{
                            fileName: "NewDocument.pdf",
                            paperSize: "a4",
                            margin: {
                                bottom: 20,
                                left: 20,
                                right: 20,
                                top: 20
                            }
                        }}/>
            </div>
        );
     }
    }

    var content = "<p><strong>The Kendo UI Editor wrapper for React</strong> allows your users to edit HTML in a familiar, user-friendly way. In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget outputs identical HTML across all major browsers, follows accessibility standards and provides API for content manipulation.</p>"

ReactDOM.render(
    <EditorContainer value={content}/>,
    document.querySelector('my-app')
);
In this article