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