如何解决如何在反应式笔芯中注册对齐方式
我正在使用react-quill npm软件包并在nextjs中动态导入它,并且还在使用create-next-app样板。 我可以使反应式毛笔编辑器正常工作,但是 我无法从工具栏中获取使用“对齐”按钮设置的图像样式/段落样式,并重新显示内容-图像/段落。
用例:
- 添加图像/段落并从编辑器的工具栏中添加对齐方式。
- 将编辑器内容保存在数据库中
- 使用npm软件包htmr 从数据库重新显示react-quill编辑器的内容
预期:图像/段落内容仍应右/中/对齐。
实际:图像/段落内容已删除所有样式属性。
下面是我的代码,如何在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','blockquote','list','bullet','indent','align','link','video','code-block',];
export default withRouter(CreateBlog);
解决方法
据我所试,Image resize Module不能与Nextjs的样板一起使用,并且在显示内容时样式本身不会被注册。您需要弹出样板或使用webpack。
我更喜欢您使用SunEditor来进行反应丰富的文本编辑器,该编辑器与Nextjs配合得非常好。 SunEditor github Link。您只需要在_document.js或_app.js中全局导入样式表即可。
您可以在此处看到demo
,要注册全局样式,必须将其放在pages/_app.js
(docs)中:
import '../../node_modules/react-quill/dist/quill.snow.css'
export default function MyApp({ Component,pageProps }) {
return <Component {...pageProps} />
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。