Bagaimana mendaftarkan gaya perataan di react-quill
Saya menggunakan paket react-quill npm dan secara dinamis mengimpornya di nextjs dan saya juga menggunakan boilerplate create-next-app. Saya bisa mendapatkan editor react-quill untuk bekerja tetapi saya tidak bisa mendapatkan gaya gambar / gaya paragraf yang diatur dengan tombol align dari toolbar dan menampilkan ulang konten - gambar / paragraf.
Kasus penggunaan:
- Tambahkan gambar / paragraf dan tambahkan perataan dari toolbar di editor.
- Simpan konten editor dalam database
- Tampilkan kembali konten editor react-quill dari database menggunakan npm package htmr
Yang diharapkan: konten gambar / paragraf harus tetap rata kanan / tengah / rata.
Sebenarnya: konten gambar / paragraf telah menghapus semua atribut gaya.
Di bawah ini adalah kode saya, Cara mendaftarkan gaya untuk gambar / paragraf react-quill di nextjs adalah pertanyaan saya
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);
Jawaban
Sejauh yang saya coba, Image Resize Module tidak akan berfungsi dengan boilerplate Nextjs dan Style itu sendiri tidak akan terdaftar saat menampilkan konten kembali. Anda perlu mengeluarkan boilerplate atau menggunakan webpack.
Saya lebih suka Anda menggunakan SunEditor untuk bereaksi editor teks kaya yang bekerja sangat baik dengan Nextjs. Tautan github SunEditor . Anda hanya perlu mengimpor stylesheet secara global di _document.js atau _app.js.
Anda bisa melihat demonya di sini
Untuk mendaftarkan gaya global, Anda harus memasukkannya ke pages/_app.js
( docs ):
import '../../node_modules/react-quill/dist/quill.snow.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Ada RFC untuk mengizinkan impor CSS ini per halaman. Dan juga isu yang juga membicarakan hal ini.