1. Home
  2. Forum
  3. React - EJ 2
  4. Previous data disappeared on Enter

Previous data disappeared on Enter

Hi team,
When added data from rich text editor and saved data at db.

a1.PNG  
But next time,when I edited data by clicking enter key and added some lines .

a2.PNG

But after showing at detail page ,previous data is disappeared and and only updated data show.

a3.PNG


How can I fix to get all previous and edited data?


3 Replies
GK Gunasekar Kuppusamy Syncfusion Team October 29, 2021 07:01 AM UTC

Hi Mon,

Greetings from Syncfusion support.

We have validated your reported query from our end but we are not clear with the query. We need additional information on this issue.

So, please share the following details,  
  • How do you store and retrieve the RichTextEditor content to DataBase?
  • How do you show the content on the "details page"?
  • Any video reference for the issue reproducing case.
  • If possible share code snippets or a simple sample to reproduce the issue.
  
The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest.  
 
Regards, 
Gunasekar 


MO Mon October 29, 2021 08:17 AM UTC

Hi Team,

Thanks for the reply.

storing and retrieving the RichTextEditor content to DataBase and editing the contents is like this.

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import {
Button,
CssBaseline,
Grid,
Container,
} from "@material-ui/core/";
import { makeStyles } from "@material-ui/core/styles";
import {
RichTextEditorComponent,
HtmlEditor,
Inject,
Toolbar,
Image,
Link,
RichTextEditor,
Count,
QuickToolbar,
} from "@syncfusion/ej2-react-richtexteditor";
import { CreatePost, UpdatePost } from "../../api/post";
import { sendBasicMail } from "../../api/mail";
import { CommonLoading } from "react-loadingg";
import "./Posts.scss";

export default function Post(props) {
const dispatch = useDispatch();
const history = useHistory();
const classes = useStyles();
const [template, setTemplate] = useState("");
const [rteObj, setRetObj] = useState({});
const [loading, setLoading] = useState(false);

let toolbarSettings = {
items: [
"Bold",
"Italic",
"Underline",
"StrikeThrough",
"FontName",
"FontSize",
"FontColor",
"BackgroundColor",
"LowerCase",
"UpperCase",
"|",
"Formats",
"Alignments",
"OrderedList",
"UnorderedList",
"Outdent",
"Indent",
"|",
"CreateLink",
"Image",
"|",
"ClearFormat",
"Print",
"SourceCode",
"FullScreen",
"|",
"Undo",
"Redo",
],
};

let imageSettings = {
saveFormat: "Base64",
};

useEffect(() => {
if (props.page === undefined) {
RichTextEditor.Inject(
HtmlEditor,
Image,
Link,
Toolbar,
Count,
QuickToolbar
);
const obj = new RichTextEditor(
{
height: 400,
valueTemplate: template,
toolbarSettings: toolbarSettings,
insertImageSettings: imageSettings,
},
"#rteElement"
);

setRetObj(obj);
}
}, []);

useEffect(() => {
async function setMyPost() {
if (
props.page === "mypost" ||
props.page === "mydraftpost" ||
props.page === "filter-word"
) {
let contents = "";
if (props?.data?.contents && props?.data?.contents !== "") {
const parser = new DOMParser();
const doc = parser.parseFromString(
props?.data?.contents,
"text/html"
);
if (doc.getElementById("rteElement_rte-edit-view") != null) {
contents = doc.getElementById("rteElement_rte-edit-view").innerHTML;
setTemplate(contents);
}
}
document.getElementById("template").innerHTML = props?.data?.contents;
setTemplate(props?.data?.contents);
}
}
setMyPost();
}, [props, dispatch]);

const handleSubmit = async (event) => {
setLoading(true);
event.preventDefault();
let contents = "";
if (props.page === "mypost" || props.page === "mydraftpost") {
contents = document.getElementById("template").innerHTML;
} else {
contents = rteObj.getContent().innerHTML;
}

const formData = new FormData();
formData.append("content", contents);
if (props.page === "mypost" || props.page === "mydraftpost") {
const id = props.data.id;
response = await dispatch(UpdatePost({ formData, id }));
setLoading(false);
if (response?.payload?.response?.data?.success === true) {
history.push("/home");
}
} else {
const response = await dispatch(CreatePost(formData));
setLoading(false);
if (
response?.payload?.code?.data?.success === true ||
response?.payload?.response?.data?.success === true
) {
await dispatch(sendBasicMail());
history.push("/home");
}
}
};

return (
<div className="container">
<Container component="main" maxWidth="xl">
<CssBaseline />
<div className={classes.paper}>
<form className={classes.form}>
<Grid container spacing={2}>
<Grid item xs={12}>
<div className="editor">
{props.page === undefined ? (
<textarea id="rteElement" />
) : (
<RichTextEditorComponent
height={450}
toolbarSettings={toolbarSettings}
insertImageSettings={imageSettings}
>
<div id="template">div>
<Inject
services={[
Toolbar,
HtmlEditor,
Image,
Link,
QuickToolbar,
]}
/>
RichTextEditorComponent>
)}
div>
Grid>
Grid>
{props.page === "mypost" || props.page === "mydraftpost" ? (
<React.Fragment>
<div className="submit-sec">
<Button
type="submit"
variant="contained"
onClick={handleSubmit}
color="primary"
>
Update
Button>
div>
React.Fragment>
) : (
<React.Fragment>
<div className="submit-sec">
<div className={(classes.buttons, "btn")}>
<Button
variant="contained"
color="primary"
onClick={handleSubmit}
className={classes.submit}
>
Create
Button>
div>
div>
React.Fragment>
)}
form>
div>
Container>
{loading ? (
<CommonLoading
className="loading"
type="Puff"
color="#3f51b5"
height={100}
width={100}
timeout={3000}
paddingTop={200}
/>
) : (
""
)}
div>

I created create page and update page in one component.

when I edited the original data by using Enter key to add some line, but all previous and updated data not store correctly.
I don't know how to solve that problem?


IS Indrajith Srinivasan Syncfusion Team November 1, 2021 08:38 AM UTC

Hi Mon, 
 
Good day to you,  
 
We have checked your shared code blocks, we suspect the reported issue occurs since the Rich Text Editor value is not sent properly for the preview. We have prepared a sample, to get the Rich Text Editor value for each values being changes using the value property and show the editor content. 
 
In the below sample, we have used the following, 
 
  • Button to get the updated Editor value.
  • Rich Text Editor value property, to get the editor value.
  • saveInterval property set as 1 to update the editor value immediately.
 
 
API links:  
 
 
Can you please try the above suggestion and let us know if you face any difficulties? 
 
Regards, 
Indrajith 


Loader.
Up arrow icon