Comment enregistrer les styles d'alignement dans React-Quill
J'utilise réagir-Quill ce paquet NPM et importer dynamiquement dans nextjs et je suis aussi à l' aide de créer-next-app - partout. Je suis en mesure de faire fonctionner l'éditeur react-quill mais je ne suis pas en mesure d'obtenir les styles d'image / styles de paragraphe définis avec le bouton d'alignement de la barre d'outils et de réafficher le contenu - image / paragraphe.
Cas d'utilisation:
- Ajoutez une image / un paragraphe et ajoutez un alignement à partir de la barre d'outils dans l'éditeur.
- Enregistrer le contenu de l'éditeur dans une base de données
- Réafficher le contenu de l'éditeur react -quill à partir de la base de données à l'aide du package npm htmr
Attendu: le contenu de l'image / du paragraphe doit toujours être aligné à droite / au centre / à justifier.
Réel: le contenu de l'image / paragraphe a tous les attributs de style supprimés.
Voici mon code, Comment enregistrer le style pour l'image / paragraphe de react-quill dans nextjs est ma question
import { useState,useEffect } from 'react'
import Router from 'next/router'
import dynamic from 'next/dynamic'
import { withRouter } from 'next/router' // used to get access to props of react-dom
import { getCookie,isAuth } from '../../actions/auth';
import { createBlog } from '../../actions/blog'
// dynamically importing react-quill
const ReactQuill = dynamic( ()=> import('react-quill'), {ssr:false} )
import '../../node_modules/react-quill/dist/quill.snow.css'
const CreateBlog = ( {router} ) => {
const [ body,setBody ] = useState( blogFromLS() )
const [ values,setValues ] = useState({
error : '',
sizeError : '',
success : '',
formData : '',
title : '',
hidePublishButton : false
})
const { error, sizeError, success, formData, title, hidePublishButton } = values;
const token = getCookie('token')
useEffect(()=>{
setValues({...values, formData: new FormData()})
initCategories()
intiTags()
},[router])
const handleChange = name => e => {
//console.log(e.target.value)
const value = name === 'photo' ? e.target.files[0] : e.target.value
formData.set(name,value)
setValues({...values, [name]:value, formData : formData , error:''})
};
const handleBody = e => {
//console.log(e)
setBody(e)
formData.set('body',e)
if(typeof window !== 'undefined'){
localStorage.setItem('blog',JSON.stringify(e))
}
}
const publishBlog =(e) => {
e.preventDefault();
// console.log('ready to publish')
createBlog(formData, token).then(data => {
if(data.error){
setValues({...values,error:data.error})
// console.log('error macha')
}
else{
setValues({...values,title:'' ,error:'', success:' Blog was Published
successfully '})
setBody('')
setCategories([]);
setTags([])
}
})
}
const createBlogForm = () => {
return <form onSubmit= { publishBlog }>
<div className="form-group">
<label className="text-muted"> Title </label>
<input type="text" className="form-control"
value= { title } onChange={handleChange('title')} ></input>
</div>
<div className="form-group">
<ReactQuill style={{height:'30rem',marginBottom:'8rem'}} value={body}
placeholder="Write here, minimum of 200 charaters is required"
modules={CreateBlog.modules} formats={ CreateBlog.formats } onChange={ handleBody } >
</ReactQuill>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary" > Publish </button>
</div><br></br>
</form>
}
const showError = () => (
<div className="alert alert-danger" style={{display : error ? '' : 'none'}}> {error} </div>
)
const showSuccess = () => (
<div className="alert alert-success" style={{display : success ? '' : 'none'}}> {success} </div>
)
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-8">
{ createBlogForm() }
<div>
{showError()}
{showSuccess()}
</div>
</div>
<div className="col-md-4">
<div className="form-group pb-2">
<h5>Featured Image</h5>
<hr></hr>
<small className="text-muted">Max.size upto 2mb</small><br></br>
<label className="btn btn-outline-info">
Upload Featured Image
<input onChange={handleChange('photo')} type="file" accept="image/*" hidden></input>
</label>
</div>
</div>
</div>
</div>
)
}
CreateBlog.modules = {
toolbar : [
[{ header:'1' }, {header:'2'}, {header:[3,4,5,6] } , {font:[]} ],
[{ size:[] }],
['bold','italic','underline','strike','blockquote'],
[{ list:'ordered' }, {list:'bullet'},{'indent': '-1'}, {'indent': '+1'} ],
[{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
['link','image','video'],
['clean'],
['code-block']
]
};
CreateBlog.formats = [
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'indent',
'align',
'link',
'image',
'video',
'code-block',
];
export default withRouter(CreateBlog);
Réponses
Autant que j'ai essayé, le module de redimensionnement d'image ne fonctionnera pas avec le passe-partout de Nextjs et les styles eux-mêmes ne seront pas enregistrés lors de l'affichage du contenu.Vous devez soit éjecter le passe-partout, soit utiliser le pack Web.
Je préfère que vous utilisiez SunEditor pour React Rich Text Editor qui fonctionne extrêmement bien avec Nextjs. Lien github SunEditor . Il vous suffit d'importer la feuille de style globalement dans votre _document.js ou _app.js.
Vous pouvez voir la démo ici
Pour enregistrer un style global, vous devez le mettre dans pages/_app.js
( docs ):
import '../../node_modules/react-quill/dist/quill.snow.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Il existe une RFC pour permettre cette importation CSS sur une base par page. Et aussi une question qui en parle également.