none
When i am trying to get data from rich text box from list and bind it to pnp Rich text box nothing is visible in control, though the data is there in that state i have assigned, i have checked in developer tool.....but it is not showing RRS feed

  • Question



  • export interface ISpfxPnpRichtextState {
    description: string;
    SuccessMessage: string;
    }

    export default class RichTextTest extends React.Component<IRichTextTestProps, ISpfxPnpRichtextState,{}> {
    constructor(props: IRichTextTestProps, state: ISpfxPnpRichtextState) {
    super(props);
    sp.setup({
    spfxContext: this.props.context
    });

    this.state = { SuccessMessage: '', description: '' };
    this._getDescription();
    }
    public render(): React.ReactElement {
    return (
    < RichText isEditMode={true} value={this.state.description} />
    );
    }

    @autoBind
    private async _getDescription() {
    const item: any = await sp.web.lists.getByTitle("Employee Registration").items.getById(61).get();

    console.log(this.state.description);
    console.log(item.Description);

    let dummyElement = document.createElement("DIV");
    dummyElement.innerHTML = item.Description;
    let outputText = dummyElement.innerText;

    this.setState({ description: outputText });
    }

    @autoBind
    private async _updateDescription() {
    console.log(this.state.description);
    const updatedItem = await sp.web.lists.getByTitle("Employee Registration").items.getById(61).update(
    {
    Description: this.state.description
    });
    this.setState({ SuccessMessage: 'Successfully saved' });
    }
    }
    • Edited by Sunny sinha Wednesday, June 17, 2020 1:57 PM
    Wednesday, June 17, 2020 1:55 PM

All replies

  • Hi Sunny,

    Modify the code snippet as below, directly set state for RichText control instead:

    import * as React from 'react';
    import styles from './RichTextTest.module.scss';
    import { IRichTextTestProps } from './IRichTextTestProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { RichText } from "@pnp/spfx-controls-react/lib/RichText";
    import { sp } from "@pnp/sp/presets/all";
    
    export interface ISpfxPnpRichtextState {
      description: string;
      SuccessMessage: string;
      }
    
    export default class RichTextTest extends React.Component<IRichTextTestProps,ISpfxPnpRichtextState, {}> {
      constructor(props:IRichTextTestProps, state:ISpfxPnpRichtextState){
          super(props);
          sp.setup({
            spfxContext: this.props.context
            });
    
      this.state = { SuccessMessage: '', description: '' };
    
      }
    
    private _RichCtl: RichText | null;
    
      public render(): React.ReactElement<IRichTextTestProps> {
        return (
          <RichText ref={c => (this._RichCtl = c)} isEditMode={true} />
        );
      }
    
      
      componentDidMount() {
        this._getDescription().then((outputText)=>{
          this._RichCtl.setState({text:outputText});
        });
      }
    
      private async _getDescription() {
        const item: any = await sp.web.lists.getByTitle("Employee Registration").items.getById(1).get();
    
        console.log(item.Description);
    
        let dummyElement = document.createElement("DIV");
        dummyElement.innerHTML = item.Description;
        let outputText = dummyElement.innerText;
    
        return outputText
        }
    
    }
    

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, June 18, 2020 5:08 AM
  • Thanks....i think this should be be mentioned in the pnp control documentation that there are two issue.....one with the onchange and other with binding the existing value in control. 
    Monday, June 22, 2020 9:13 PM
  • Hi Sunny,

    onChange event for RichText control can be applied like this:

    import * as React from 'react';
    import styles from './RichTextTest.module.scss';
    import { IRichTextTestProps } from './IRichTextTestProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { RichText } from "@pnp/spfx-controls-react/lib/RichText";
    import { sp } from "@pnp/sp/presets/all";
    
    export interface ISpfxPnpRichtextState {
      description: string;
      SuccessMessage: string;
      }
    
    export default class RichTextTest extends React.Component<IRichTextTestProps,ISpfxPnpRichtextState, {}> {
      constructor(props:IRichTextTestProps, state:ISpfxPnpRichtextState){
          super(props);
          sp.setup({
            spfxContext: this.props.context
            });
    
      this.state = { SuccessMessage: '', description: '' };
    
      }
    
    private _RichCtl: RichText | null;
    
      public render(): React.ReactElement<IRichTextTestProps> {
        return (
          <RichText ref={c => (this._RichCtl = c)} isEditMode={true}   onChange={(text)=>this.onTextChange(text)} />
        );
      }
    
    
      componentDidMount() {
        this._getDescription().then((outputText)=>{
          this._RichCtl.setState({text:outputText});
        });
      }
    
      private async _getDescription() {
        const item: any = await sp.web.lists.getByTitle("Employee Registration").items.getById(1).get();
    
        console.log(item.Description);
    
        let dummyElement = document.createElement("DIV");
        dummyElement.innerHTML = item.Description;
        let outputText = dummyElement.innerText;
    
        return outputText
    
        console.log(1);
        }
    
        private onTextChange = (newText: string) => {
          newText = newText.replace(" bold ", " <strong>bold</strong> ");
          this.setState({
            description: newText
          })
          console.log(newText);
          return newText;
        }
    
    }
    

    If you found that the reply above is helpful to the original question, you could Mark as answer so that it could also help others in the forum who have similiar question.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, June 23, 2020 2:26 AM
  • Hi Sunny,

    I am checking to see how things are going there on this issue. Please let us know if you would like further assistance.

    You can mark the helpful post as answer to help other community members find the helpful information quickly.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.





    Tuesday, June 30, 2020 6:23 AM