crimsondeal
Top achievements
Rank 1
Rank 1
crimsondeal
asked on 24 Nov 2019, 08:56 PM
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?
2 Answers, 1 is accepted
0
Accepted
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
crimsondeal
Top achievements
Rank 1
Rank 1
answered on 25 Nov 2019, 06:08 PM
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!