React-quill: Editor ref not work on ssr
Editor ref not return method propely, sorry i cannot attach my code to codepen but my app server side rendering
Here my code
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import dynamic from 'next/dynamic';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Bookmark from '@material-ui/icons/Bookmark';
import Person from '@material-ui/icons/Person';
import Memory from '@material-ui/icons/Memory';
import Time from '@material-ui/icons/AccessTime';
import MenuItem from '@material-ui/core/MenuItem';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Paper from '@material-ui/core/Paper';
const ReactQuill = dynamic(import('react-quill'))
import 'react-quill/dist/quill.snow.css';
class CreatePostView extends Component {
state = {
content: ''
}
editorRef = null
editorOptions = {
modules: {
toolbar: {
container: [
[{'header': [1, 2, 3, 4, 5, 6, false]}, 'bold', 'italic', 'underline', 'strike'],
[{'align': []}, {'list': 'ordered'}, {'list': 'bullet'}],
['link', 'blockquote', 'code-block'],
['image', 'video'],
[{'color': []}, 'clean']
],
handlers: {
'image' : (e) => {
this.uploadImage(e)
}
}
}
}
}
uploadImage = (e) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click();
input.onchange = () => {
const file = input.files[0];
if (/^image\//.test(file.type)) {
console.log(file)
console.log(this.editorRef)
} else {
console.log('You could only upload images.');
}
}
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Typography className={classes.headline} variant="display1">Buat post baru</Typography>
<Typography className={classes.subHeadline} variant="body1" gutterBottom>Share your post, it's free</Typography>
<Grid container spacing={16}>
<Grid item xs={12} md={8}>
<TextField fullWidth
label="Judul"
placeholder="Sebuah judul"
InputLabelProps={{
shrink: true
}}
className={classes.input}
/>
<TextField fullWidth
select
label="Kategori"
className={classes.input}
value="wkkwwland"
>
<MenuItem key="1" value="wkkwwland">wkkwland</MenuItem>
<MenuItem key="2" value="djdjdj">djdjdjdj</MenuItem>
</TextField>
<TextField fullWidth
label="Tag"
placeholder="Pisahkan dengan koma"
InputLabelProps={{
shrink: true
}}
className={classes.input}
/>
<ReactQuill value={this.props.getContent()}
onChange={this.props.handleContent}
modules={this.editorOptions.modules}
ref={(el) => this.editorRef = el}
/>
</Grid>
<Grid item xs={12} md={4}>
<Paper className={classes.sidebarItem}>
<Typography variant="title" className={classes.sidebarItemTitle}>Post detail</Typography>
<List>
<ListItem>
<ListItemIcon>
<Bookmark/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Status : <div className={classes.postDetailValue}>{this.props.post_details.status}</div>
</Typography>
}
/>
</ListItem>
<ListItem>
<ListItemIcon>
<Time/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Published : <div className={classes.postDetailValue}>{this.props.post_details.published_time ? this.props.post_details.published_time : new Date().toLocaleString()}</div>
</Typography>
}
/>
</ListItem>
<ListItem>
<ListItemIcon>
<Memory/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Autosave : <div className={classes.postDetailValue}>{this.props.post_details.autosave ? 'ON' : 'OFF'}</div>
</Typography>
}
/>
</ListItem>
<ListItem>
<ListItemIcon>
<Person/>
</ListItemIcon>
<ListItemText primary={
<Typography variant="subheading">
Author : <div className={classes.postDetailValue}>{this.props.post_details.author}</div>
</Typography>
}
/>
</ListItem>
</List>
<div className={classes.sidebarFooterAction}>
<Grid container>
<Grid item xs={6}>
<Button variant="contained" color="primary">Simpan draft</Button>
</Grid>
<Grid container item xs={6} direction="column" alignItems="flex-end">
<Button onClick={() => console.log(ReactQuill.Toolbar)} variant="contained" color="primary">Publish</Button>
</Grid>
</Grid>
</div>
</Paper>
<Paper className={classes.sidebarItem}>
<Typography variant="title" className={classes.sidebarItemTitle}>Other meta</Typography>
<div className={classes.otherMetaForm}>
<div onClick={this.props.pickFeaturedImage} className={classes.featuredImage} id="featured_image">
<Typography id="featured_image_text" variant="title" className={classes.featuredImageText}>Featured image</Typography>
<input onChange={this.props.handleFeaturedImage} type="file" id="featured_image_picker" accept="image/*" style={{ display: 'none'}}/>
</div>
<TextField fullWidth
label="Slug"
placeholder="Kosongkan jika ingin default"
InputLabelProps={{
shrink: true
}}
className={classes.input}
/>
<TextField id="excerpt"
label="Deskripsi"
multiline
fullWidth
variant="outlined"
rows={4}
className={classes.input}
/>
</div>
</Paper>
</Grid>
</Grid>
</div>
)
}
}
const styles = theme => ({
root: {
margin: theme.spacing.unit,
[theme.breakpoints.up('md')]: {
margin: 20
}
},
headline: {
fontWeight: 'bold',
marginTop: 20,
},
subHeadline: {
marginBottom: 30,
paddingLeft: 2
},
featuredImage: {
marginTop: 20,
borderRadius: 6,
height: 150,
border: 'solid 2px #6200EE',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: '100% 100%',
marginBottom: 20,
textAlign: 'center',
},
featuredImageText: {
marginTop: 60
},
input: {
marginBottom: 20 ,
},
sidebarItem: {
marginBottom: theme.spacing.unit * 2
},
sidebarItemTitle: {
padding: 20,
paddingBottom: 0
},
sidebarFooterAction: {
padding: 20,
paddingTop: 0
},
otherMetaForm: {
padding: 20,
paddingTop: 0,
paddingBottom: 0
},
postDetailValue: {
textDecoration: 'underline',
fontWeight: 'bold',
display: 'inline'
}
})
export default withStyles(styles)(CreatePostView)
When i trying this.editorRef.getEditor() the error throwing "getEditor not a function"
ardyfeb
All 8 comments
And i already follow the code on readme.md , the result are same
ardyfeb
on 19 Sep 2018
Closed, the issue at https://github.com/zeit/next.js/blob/canary/README.md#dynamic-import
ardyfeb
on 20 Sep 2018
👍1
@ardyfeb Looks like the link is not available now
RixBai
on 27 May 2020
@ardyfeb Looks like the link is not available now
Moved here https://nextjs.org/docs/advanced-features/dynamic-import
ardyfeb
on 27 May 2020
So you did set ssr option to false, right?
RixBai
on 27 May 2020
So you did set ssr option to false, right?
Yep
ardyfeb
on 27 May 2020
Did it work? I've been cracking my head the entire day and still can't get it to work with Next even after setting ssr to false. My ref is never a Quill object
alvinthen
on 10 Jun 2020
👍1
Did it work? I've been cracking my head the entire day and still can't get it to work with Next even after setting ssr to false. My ref is never a Quill object
have you found a work on this already? i've also wasted days trying to come up with a solution.
Thanks
jularbs
on 16 Sep 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
alexkrolick
路
4Comments
andylacko
路
5Comments
aliciawood
路
3Comments
mtando
路
5Comments
Nazanin1369
路
4Comments