Cómo registrar estilos de alineación en react-quill
Estoy usando el paquete react-quill npm y lo estoy importando dinámicamente en nextjs y también estoy usando create-next-app boilerplate. Puedo hacer que funcione el editor react-quill, pero no puedo obtener los estilos de imagen / estilos de párrafo que se establecen con el botón de alinear de la barra de herramientas y volver a mostrar el contenido: imagen / párrafo.
Caso de uso:
- Agregue una imagen / párrafo y agregue alineación desde la barra de herramientas en el editor.
- Guarde el contenido del editor en una base de datos
- Vuelva a mostrar el contenido del editor react-quill de la base de datos usando el paquete npm htmr
Se esperaba: el contenido de la imagen / párrafo aún debe estar alineado a la derecha / centro / justificado.
Real: se han eliminado todos los atributos de estilo del contenido de la imagen / párrafo.
A continuación se muestra mi código, mi pregunta es cómo registrar el estilo para la imagen / párrafo de react-quill en nextjs
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);
Respuestas
Por lo que he intentado, el módulo de cambio de tamaño de imagen no funcionará con el texto estándar de Nextjs y los estilos en sí no se registrarán mientras se muestra el contenido de nuevo. Debe expulsar el texto estándar o usar el paquete web.
Prefiero que use SunEditor para reaccionar editor de texto enriquecido que funciona extremadamente bien con Nextjs. SunEditor github Link . Solo necesita importar la hoja de estilo globalmente en su _document.js o _app.js.
Puedes ver la demo aquí
Para registrar un estilo global, debe ponerlo en pages/_app.js
( docs ):
import '../../node_modules/react-quill/dist/quill.snow.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Existe un RFC para permitir esta importación de CSS por página. Y también un tema que también habla de esto.