Siipss... ini rich editor yang ke-3 yang kita cobain di next js. Sebelumnya kita udah nyobain CKEDITOR5 dan React-QUILL... naaah skrg kita bakalan nyobain yang CKEDITOR4... So sy g' bakalan start dari awal lagi wkwkw... udah ngantukk... @_@
So langsung ajjah daa.. kita install package dl laah...
npm i --save ckeditor4-react
Itu ko' banyak warning yaaak... yaa biarin laaah... :v
abis itu beralih ke index.jsnya next.js trs tambain ginian:
import Head from 'next/head' import styles from '../styles/Home.module.css' // import ReactQuill from 'react-quill' import 'react-quill/dist/quill.snow.css' import {useState, useEffect, useRef} from 'react' export default function Home() { const [text, setText] = useState('') const ckedt4 = useRef() const [editorLoaded, setEditorLoaded] = useState(false) const {CKEditor4} = ckedt4.current || {} useEffect(() => { ckedt4.current = { CKEditor4: require('ckeditor4-react') } setEditorLoaded(true) }, []) const handleChange = (val) => { setText(val) console.log(val) } return ( <div className={styles.container}> <Head> <title>Create Next App</title> <link rel="icon" href="/favicon.ico" /> </Head> <h2> Testing CK EDITOR 4 in Next JS </h2> {editorLoaded && <CKEditor4 //data={text} data="<p>initial text</p>" onChange={(val) => handleChange(val)} /> } </div> ) }
Hasilnya:
Trs klu masukin image kita harus upload dl filenya ditempat lain, terus dapatin url-nya, trs baru dimasukin ke editornya... tampilannya kekgini laah
Daaah... bobo dl... :v
No comments:
Post a Comment