Update Editor Content based on DropDownList Selection

3 posts, 1 answers
  1. Chad
    Chad avatar
    13 posts
    Member since:
    Jan 2020

    Posted 05 Mar 2020 Link to this post

    I am trying to create a module that allows users to pre-fill dummy content in an editor based on a selection made in an external DropDownList. In the code provided you can see I am using two components and I can pass the initial state into the editor however once loaded I am unable to update the content in the editor. Additionally I have the change rendering in the page outside of either component. Hitting a wall here. See code below.

    <code>

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

    const { Bold, Italic, Underline,
        AlignLeft, AlignRight, AlignCenter,
        Indent, Outdent,
        OrderedList, UnorderedList,
        Undo, Redo, Link, Unlink } = EditorTools;

    export class SimpleDropDown extends React.Component {
        static displayName = SimpleDropDown.name;

        componentDidMount() {
            let editor = document.getElementsByClassName('k-editor')[0]
            let iFrame = editor.querySelector('iframe')
            iFrame.contentDocument.querySelector('.k-content').setAttribute("style", "font-family: Arial, Helvetica, sans-serif;")
        }

        sports = [
            { text: 'Basketball', id: 1 },
            { text: 'Football', id: 2 },
            { text: 'Tennis', id: 3 },
            { text: 'Volleyball', id: 4 }
        ];
        state = {
            // Since the reference of the initial value is not from the 'sports' collection,
            // 'dataItemKey' have to be set.
            value: { text: 'Football', id: 2 }
        };

        handleChange = (event) => {
            this.setState({
                value: event.target.value
            });
        }

        render() {
            return (
                <>
                <div>
                    <div className="example-config">
                        Selected Value: {JSON.stringify(this.state.value)}
                    </div>
                    <DropDownList
                        data={this.sports}
                        textField="text"
                        dataItemKey="id"
                        value={this.state.value}
                        onChange={this.handleChange}
                    />
                </div>
                <div>
                    <div className="row">
                        <div className="col-12">
                            <Editor
                                tools={[
                                    [Bold, Italic, Underline],
                                    [Undo, Redo],
                                    [Link, Unlink],
                                    [AlignLeft, AlignCenter, AlignRight],
                                    [OrderedList, UnorderedList, Indent, Outdent]
                                ]}
                                contentStyle={{ height: 320 }}
                                defaultContent={this.state.value.text}
                                />
                        </div>
                    </div>
                    </div>
                    </>
            );
        }
    }

    </code>

    Thank you in advance for any light you can shed on where I am getting hung up.

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 09 Mar 2020 Link to this post

    Hello, Chad,

    Thank you for the details.

    I can suggest checking the following demo that shows how to set or get the content of the Editor dynamically:

    https://www.telerik.com/kendo-react-ui/components/editor/content/

    The setHtml method will allow setting new content to the Editor based on a change in the application.

    I hope this is helpful.

    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
  3. Chad
    Chad avatar
    13 posts
    Member since:
    Jan 2020

    Posted 09 Mar 2020 in reply to Stefan Link to this post

    Perfect solution, thank you!
Back to Top