Getting and Setting HTML Content

The Editor enables you to programmatically get the HTML content of the Editor and set an updated version back.

The following example demonstrates how to achieve the suggested scenario by using the getHtml and setHtml functions.

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools, EditorUtils } from '@progress/kendo-react-editor';

const { Bold, Italic, Underline } = EditorTools;

class App extends React.Component {
    editor = null;
    textarea = null;

    getHtml = () => {
        const view = this.editor.view;
        this.textarea.value = EditorUtils.getHtml(view.state);
    }

    setHtml = () => {
        const view = this.editor.view;
        EditorUtils.setHtml(view, this.textarea.value);
    }

    render() {
        return (
            <div>
                <Editor
                    tools={[
                        [ Bold, Italic, Underline ]
                    ]}
                    contentStyle={{ height: 160 }}
                    defaultContent={'<p>editor sample html</p>'}
                    ref={editor => this.editor = editor}
                />
                <br />
                <button
                    className="k-button k-button-icontext"
                    onClick={this.getHtml}
                >
                    <span className="k-icon k-i-arrow-60-down" />Gets HTML
                </button>
                &nbsp;
                <button
                    className="k-button k-button-icontext"
                    onClick={this.setHtml}
                >
                    <span className="k-icon k-i-arrow-60-up" />Sets HTML
                </button>
                <br /><br />
                <textarea
                    className="k-textarea"
                    style={{ height: 100, width: '100%', resize: 'none' }}
                    defaultValue="<p>textarea sample html</p>"
                    ref={textarea => this.textarea = textarea}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /