Thursday, October 22, 2020

Menggunakan CKEDITOR4 di NextJS

 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