Ckeditor4-react not show data at the first time in update details it required reffresh the page
hariomnagriya opened this issue · 1 comments
import React, { Component } from "react";
import Validator from "js-object-validation";
import { addPageValidatoin, addPageValidatoinMessages } from "../../../validations/Page.js";
import { logger } from "../../../Helpers/Logger";
import { AppRoutes } from "../../../Config/AppRoutes";
import CKEditor from 'ckeditor4-react';
import {
FormGroup,
Row,
Col,
FormFeedback,
Input,
Button,
Label,
Card,
CardBody,
} from "reactstrap";
class AddPageComponent extends Component {
constructor(props) {
super(props);
this.state = {
title: "",
content: "",
editorState: "",
metaTitle: "",
metaKeywords: "",
metaDescription: "",
data: 0,
errors: {},
}
}
componentDidUpdate = ({ pageData }) => {
if (this.props.pageData && this.props.pageData.page && pageData.page && this.props.pageData.page !== pageData.page) {
console.log("data", this.props.pageData.page);
const {
title,
content,
metaTitle,
metaKeywords,
metaDescription,
} = this.props.pageData.page;
this.setState({
title,
content,
metaTitle,
metaKeywords,
metaDescription,
});
if (this.props.pageData.page.content && this.props.pageData.page.content !== undefined) {
let data = this.stripHtml(this.props.pageData.page.content).trim().length;
this.setState({ data });
}
}
};
stripHtml = (html) => {
let html1 = html.replace("<img", "||img||");
let html2 = html1.replace("<div", "||div||");
var temporalDivElement = document.createElement("div");
temporalDivElement.innerHTML = html2;
html2 = temporalDivElement.textContent || temporalDivElement.innerText || "";
html1 = html2.replace("||div||", "<div");
return html1.replace("||img||", "<img");
};
handleInputChange = (e) => {
const { target } = e;
const { name, value } = target;
this.setState({
[name]: value,
errors: {
...this.state.errors,
[name]: null
}
});
};
onEditorChange = (evt) => {
this.setState({
content: evt.editor.getData(),
errors: {
...this.state.errors,
'content': null
}
});
console.log("editorData",evt.editor.getData());
let data = this.stripHtml(evt.editor.getData()).trim().length
this.setState({ data })
};
handleSubmit = (e) => {
try {
const {
title,
content,
metaTitle,
metaKeywords,
metaDescription,
data
} = this.state;
const payload = {
title,
content,
metaTitle,
metaKeywords,
metaDescription,
};
let { isValid, errors } = Validator(
payload,
addPageValidatoin,
addPageValidatoinMessages
);
if (data < 1) {
errors.content = "Please enter page content.";
isValid = false;
}
if (!isValid) {
this.setState({
errors
});
return;
}
else {
if (this.props.openEdit) {
console.log("payload", payload);
this.props.onEditPage(payload)
} else {
this.props.onAddPage(payload);
}
}
}
catch (error) {
logger(error);
}
};
handleCancel = () => {
this.props.onGoPage(${AppRoutes.PAGE.url});
};
modalOpen = (Page) => {
this.props.modalOpen({ Page });
}
render() {
const { openEdit } = this.props;
const { title, metaTitle, metaKeywords, metaDescription, errors, content, data } = this.state;
//console.log("DAta", this.props.pageData.page);
console.log("title*********", title, "content**********", content);
return (
<>
Title
<Input
type="text"
name="title"
value={title}
onChange={this.handleInputChange}
placeholder="Page Title"
invalid={errors.title ? true : false}
/>
{errors.title ? errors.title : null}
Content
<div className={errors.content ? "input-block border border-danger" : "input-block border"}>
<CKEditor
data={content}
onChange={this.onEditorChange}
type='classic'
config={{
extraPlugins: 'embed,autoembed,easyimage,justify',
removePlugins: 'image',
removeDialogTabs: 'link:advanced',
removeButtons: "",
toolbar: [{
name: 'document',
items: ['Undo', 'Redo']
},
{
name: 'styles',
items: ['Format']
},
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Underline']
},
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent']
},
{
name: 'align',
items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
},
{
name: 'links',
items: ['Link']
},
{
name: 'insert',
items: ['EasyImageUpload', 'Embed', 'Timestamp']
}
],
// Load the default contents.css file plus customizations for this sample.
contentsCss: [
'http://cdn.ckeditor.com/4.12.1/full-all/contents.css',
'https://ckeditor.com/docs/vendors/4.12.1/ckeditor/assets/css/widgetstyles.css'
],
// Setup content provider. See https://ckeditor.com/docs/ckeditor4/latest/features/media_embed
embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
// Configure the Enhanced Image plugin to use classes instead of styles and to disable the
// resizer (because image size is controlled by widget styles or the image takes maximum
// 100% of the editor width).
height: 430,
cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
// Note: this is a token endpoint to be used for CKEditor 4 samples only. Images uploaded using this token may be deleted automatically at any moment.
// To create your own token URL please visit https://ckeditor.com/ckeditor-cloud-services/.
cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
easyimage_toolbar: [
'EasyImageFull',
'EasyImageSide',
'EasyImageAlt'
],
format_tags: 'p;h1;h2;h3;h4;h5;h6'
}}
/>
</div>
{errors.content ? <p className="invalid-feedback" style={{ display: "block" }}>{errors.content}</p> : null}
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<Label className="font-weight-bold">
Meta Informations:
</Label>
<hr />
</Col>
</Row>
<Row>
<Col lg="2" md="2" sm="2" xs="2" className="text-right">
<Label className="font-weight-bold">
Meta Title
</Label>
</Col>
<Col lg="10">
<FormGroup>
<Input
type="textarea"
name="metaTitle"
value={metaTitle}
placeholder="Meta Title"
className="noresize"
onChange={this.handleInputChange}
invalid={errors.metaTitle ? true : false}
/>
<FormFeedback>
{errors.metaTitle ? errors.metaTitle : null}
</FormFeedback>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="2" md="2" sm="2" xs="2" className="text-right">
<Label className="font-weight-bold">
Meta Keywords
</Label>
</Col>
<Col lg="10">
<FormGroup>
<Input
type="textarea"
name="metaKeywords"
value={metaKeywords}
placeholder="Meta Keywords"
className="noresize"
onChange={this.handleInputChange}
invalid={errors.metaKeywords ? true : false}
/>
<FormFeedback>
{errors.metaKeywords ? errors.metaKeywords : null}
</FormFeedback>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="2" md="2" sm="2" xs="2" className="text-right">
<Label className="font-weight-bold">
Meta Description
</Label>
</Col>
<Col lg="10">
<FormGroup>
<Input
type="textarea"
name="metaDescription"
value={metaDescription}
placeholder="Meta Description"
className="noresize"
onChange={this.handleInputChange}
invalid={errors.metaDescription ? true : false}
/>
<FormFeedback>
{errors.metaDescription ? errors.metaDescription : null}
</FormFeedback>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="2"></Col>
<Col lg="10">
<Button
type="button"
className="update_button mr-2"
onClick={
() => this.handleSubmit()
}
>
{openEdit ? "Edit Page" : "Add New Page"}
</Button>
<Button
type="button"
className="cancel_button mr-2"
onClick={
() => this.handleCancel()
}
>
Cancel
</Button>
<Button
type="button"
className="update_button mr-2"
disabled={data < 1}
onClick={
() => this.modalOpen({ pageData: content })
}
>
Preview
</Button>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</>
)
}
}
export default AddPageComponent
Hello @hariomnagriya,
please note that all issues regarding CKEditor 4 Documentation should be reported in the ckeditor4 repository - https://github.com/ckeditor/ckeditor4/issues/new/choose.
If your issue is related directly to CKEditor 4 React integration please report to https://github.com/ckeditor/ckeditor4-react/issues/new.