[Solved] Multiple Kendo React Editors

[crimsondeal]

Hello,

 

Trying to add multiple Editors on a single page, and get the HTML from each. The issue is, only the most recent ref is being found when I use the following code:

 

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 {
    textarea = null;

    setEditorRef = ref => {
      this.editor = ref
    }

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

    render() {
        return (
            <div>
                <Editor
                    tools={[
                        [ Bold, Italic, Underline ]
                    ]}
                    contentStyle={{ height: 160 }}
                    defaultContent={'<p>editor sample html1</p>'}
                    ref={this.setEditorRef}
                />

                <Editor
                    tools={[
                        [ Bold, Italic, Underline ]
                    ]}
                    contentStyle={{ height: 160 }}
                    defaultContent={'<p>editor sample html2</p>'}
                    ref={this.setEditorRef}
                />
                <br />
                <button
                    className="k-button k-button-icontext"
                    onClick={this.getHtml}
                >
                    <span className="k-icon k-i-arrow-60-down" />Gets 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')
);

 

How would I implement this?

[Stefan]

Hello,

Thank you for the code.

This occurs because both editors are using the same ref function "setEditorRef".

Please set separate functions ref for all Editors.

This is the updated example showcasing this:

https://stackblitz.com/edit/react-5penqg?file=app/main.jsx

Regards,
Stefan
Progress Telerik

[crimsondeal]

Thank you! The editors were being created dynamically (and thus needed dynamic refs) so I was able to do the following in my render function:

render() {
    var thisRef = this
    thisRef['editors'] = []

    this.items = items.map(function(item, key) {
        const fullKey = 'item_' + key

        thisRef['editors'][fullKey] = React.createRef()

        return (
              <Editor defaultContent={item['copy']} ref={thisRef['editors'][fullKey]} />
        )
    })

    return (
        <div>
            {this.items}
        </div>
    )
}

 

Thank you for sending me on the right track, and the overall awesome support!