วิธีการลงทะเบียนรูปแบบการจัดตำแหน่งใน react-quill

Question

ฉันใช้แพ็กเกจ npm react- quill และนำเข้าแบบไดนามิกใน nextjs และฉันยังใช้สำเร็จรูปสำหรับสร้างแอปต่อไป ฉันสามารถเรียกโปรแกรมแก้ไขปากกาตอบกลับให้ทำงานได้ แต่ฉันไม่สามารถรับลักษณะภาพ / ลักษณะย่อหน้าที่ตั้งค่าด้วยปุ่มจัดแนวจากแถบเครื่องมือและแสดงเนื้อหาอีกครั้ง - รูปภาพ / ย่อหน้า

ใช้กรณี:

1. เพิ่มรูปภาพ / ย่อหน้าและเพิ่มการจัดแนวจากแถบเครื่องมือในตัวแก้ไข
2. บันทึกเนื้อหาตัวแก้ไขในฐานข้อมูล
3. แสดงเนื้อหาของตัวแก้ไข react-quill อีกครั้งจากฐานข้อมูลโดยใช้แพ็คเกจ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',
      'italic',
      'underline',
      'strike',
      'blockquote',
      'list',
      'bullet',
      'indent',
      'align',
      'link',
      'image',
      'video',
      'code-block',
];




export default withRouter(CreateBlog);

Answer 1

เท่าที่ฉันได้ลองแล้วโมดูลการปรับขนาดภาพจะไม่ทำงานกับต้นแบบของ Nextjs และรูปแบบเองจะไม่ได้รับการลงทะเบียนในขณะที่แสดงเนื้อหากลับคุณต้องนำแผ่นสำเร็จรูปออกหรือใช้ webpack

ฉันชอบให้คุณใช้ SunEditor เพื่อตอบสนองโปรแกรมแก้ไขข้อความที่หลากหลายซึ่งทำงานได้ดีกับ Nextjs SunEditor GitHub การเชื่อมโยง คุณเพียงแค่ต้องนำเข้าสไตล์ชีตทั่วโลกใน _document.js หรือ _app.js ของคุณ

คุณสามารถดูการสาธิตได้ที่นี่

Answer 2

ในการลงทะเบียนสไตล์ส่วนกลางคุณต้องใส่pages/_app.js( เอกสาร ):

import '../../node_modules/react-quill/dist/quill.snow.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

มีRFCเพื่ออนุญาตให้นำเข้า CSS นี้แบบต่อหน้า และยังเป็นประเด็นที่พูดถึงเรื่องนี้ด้วย