Comments (11)
perfect. Thank you so much.
from mui-rte.
Hi @Abinaskarki, every time you change the value
property you are actually resetting the editor. If you need to get the content of the editor on every change, you may use the onChange
property but there is no need to assign the value
again as the state of the component has been already updated internally.
Hope this helps you :)
from mui-rte.
Hi @niuware, thank you for your response. If I don't have onChange property then, how would I access the content inside MUITextEditor when a button is clicked?
from mui-rte.
If I understand correctly, you have some choices:
-
You can keep updating the state of your own component using the
MUIRichTextEditor
componentonChange
property, but there is no need to set thevalue
property again. (Usevalue
property only when you want to load some default content). -
If you just want to get the last state of the editor, you can trigger the
save
event by reference as shown here.
Does this helps you out?
from mui-rte.
Hi @niuware, sorry for the confusion. What I want to do is basically I will write something on a MUITextEditor and I have a button which should get the data written in MUITextEditor when clicked and do something. The only problem is that since I am not using onChange then, the content value in state is not updated and i am getting content from state. Is there another way to get text inside the MUITextEditor?
here is my code for the button;
const handleSubmit = () => {
const { content } = post;
const answerData = {
content,
questionId: props.questionId
};
props.postAnswer(answerData);
};
<Button
color="secondary"
variant="outlined"
className="w-1/4"
onClick={handleSubmit}
disabled={loading}
>
Post
</Button>
Updated Code Using onSave
const ref = useRef();
const handleSave = data => {
setPost({ ...post, content: data });
console.log(post.content);
};
const handleSubmit = () => {
ref.current.save();
const { content } = post;
const answerData = {
content,
questionId: props.questionId
};
props.postAnswer(answerData);
};
<MUIRichTextEditor
label="Write your aswer..."
onSave={handleSave}
ref={ref}
controls={[
'bold',
'italic',
'underline',
'highlight',
'link',
'media',
'numberList',
'bulletList',
'quote'
]}
inlineToolbar={true}
/>
button is not changed.
from mui-rte.
In that case, what about doing something like this:
const [post, setPost] = useState({
content: {},
answer_errors: {},
open: false,
errors: null
});
const handleChange = prop => event => {
setPost({
...post,
[prop]: event
});
};
const handleSubmit = () => {
const { content } = post;
const answerData = {
content: JSON.stringify(convertToRaw(content.getCurrentContent())),
questionId: props.questionId
};
props.postAnswer(answerData);
};
<Button
color="secondary"
variant="outlined"
className="w-1/4"
onClick={handleSubmit}
disabled={loading}
>
Post
</Button>
<MUIRichTextEditor
label="Write your aswer..."
controls={[
'bold',
'italic',
'underline',
'highlight',
'link',
'media',
'numberList',
'bulletList',
'quote'
]}
inlineToolbar={true}
onChange={handleChange('content')}
/>;
from mui-rte.
Thank you. However, it gave me an error. But, I think i figured out the solution. Now, I don't know how to check if 'data' in handleSave is empty or not because I don't want to post anything empty.
Code:
const [post, setPost] = useState({
content: {},
answer_errors: {},
open: false,
errors: null
});
const ref = useRef();
const handleSave = (data: string) => {
const answerData = { content: data, questionId: props.questionId };
const { answer_errors, valid } = validatePostAnswer(answerData.content);
setPost({ ...post, answer_errors });
if (!valid) {
return;
}
props.postAnswer(answerData);
};
const handleSubmit = () => {
ref.current.save();
};
<MUIRichTextEditor
label="Write your aswer..."
onSave={handleSave}
ref={ref}
controls={[
'bold',
'italic',
'underline',
'highlight',
'link',
'media',
'numberList',
'bulletList',
'quote'
]}
inlineToolbar={true}
/>
This works perfectly. But, i don't know how to check empty on data of handleSave.
from mui-rte.
Just convert it back to a ContentState
object:
const handleSave = (data: string) => {
const content = convertFromRaw(JSON.parse(data))
if (!content.hasText()) {
console.log("empty")
}
}
from mui-rte.
@niuware, you are right. If you don't change the value
prop, the component isn't reset.
But here a suggestion: replace the name of value
prop to defaultValue
, to make it clear it is necessary to assign value only once.
Or at least, make available a defaultValue
in the API.
from mui-rte.
@niuware, you are right. If you don't change the
value
prop, the component isn't reset.But here a suggestion: replace the name of
value
prop todefaultValue
, to make it clear it is necessary to assign value only once.Or at least, make available a
defaultValue
in the API.
Thanks @helloncanella, I will take this in mind for next version.
from mui-rte.
Another Solution is using ref with onBlur to raise the save Event.
In this solution we making the text editor semi - controlled component, which handled it`s own state.
An Example:
const textEditorRef = useRef();
const [bodyHTML, setBodyHTML] = useState('');
const contentHTML = convertFromHTML(bodyHTML);
const stateHtml = ContentState.createFromBlockArray(
contentHTML.contentBlocks,
contentHTML.entityMap
);
const handleSave = (data) => {
const content = convertFromRaw(JSON.parse(data))
if (!content.hasText()) {
console.log("empty")
}
setBodyHTML(stateToHTML(content));
}
<MUIRichTextEditor
ref={textEditorRef}
inlineToolbar={true}
defaultValue={JSON.stringify(convertToRaw(stateHtml))}
onSave={handleSave}
onBlur={() => { textEditorRef.current.save(); }}
/>
from mui-rte.
Related Issues (20)
- Autocomplete Atomic inserts the atomic component in a new line and then moves the cursor also to a new line
- Inline toolbar with more than 5 buttons covers selected text
- How to change to base64 and show when uploading images
- How do I convert MUI rich text to Google Docs text??
- How to style the editor when it gains focus? HOT 2
- Table in the toolbar
- Reset Editor HOT 1
- How to add an external value at the cursor position in the editor
- Load Existing RTF file to MUIRichTextEditor
- Title on toolbar icon
- How to auto-save notes HOT 1
- Material ui not compatiable (5.11.5) HOT 1
- Doesn't work with React ^18.2.0 HOT 7
- Question on ongoing contribution plans
- Input field is not appeared
- Autocomplete
- URL popup or media pop not editable HOT 1
- Color Picker???
- Link creation
- The mui/styles peer dependency used in this package is deprecated and can't be used for React v18 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-rte.