Dimensi TutupBotol: Next.js

Showing posts with label Next.js. Show all posts

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

Menggunakan React-Quill di NextJS

Pertama-tama kita create next app dl:

Setelah itu install react quill

npm install react-quill

Setelah itu edit index.js di root folder next js dan isikan kode ini:

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 QuillRef = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const {ReactQuill} = QuillRef.current || {}

  const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image'],
      ['clean']
    ],
  }

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

  useEffect(() => {
    QuillRef.current = {
      ReactQuill: require('react-quill')
    }
    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 React Quill in Next JS </h2>
      {editorLoaded &&
        <ReactQuill value={text}
        onChange={(val) => handleChange(val)}
        modules={modules}
        formats={formats}
        />
      }
      
      
    </div>
  )
}

Daan hasilnya :

Klu kita ngetik dan masukin image :

Menggunakan CKEDITOR5 di NextJS

Pertama-tama mari kita install next.js dengan perintah

npx create-next-app

Stelah itu kita jalanin next.js-nya buat mastiin semuanya okie

cd next-ckedt

npm run dev

Hasilnya

Siiipsss semuanya okie.... setelah itu kita beralih ke CKEditor 5 yang dokumnetasinya bisa dilihat disini:
https://ckeditor.com/docs/ckeditor5/latest/index.html

Untuk integrasi ke next.js, kita bisa lihat contoh integrasi buat react.js

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

So pertama-tama install dl packagenya

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Setelah itu kita apus semua kode di index.js seperti terlihat dibawah:

Jadi skrg pagenya udah kosong kecuali titlenya hahhaa...

Naah... abis itu kita masukin source code dibawah untuk index.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'

import React, { useState, useEffect, useRef } from 'react'

export default function Home() {
  const editorCKRef = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const { CKEditor, ClassicEditor } = editorCKRef.current || {}

  useEffect(() => {
    editorCKRef.current = {
      CKEditor: require('@ckeditor/ckeditor5-react'),
      ClassicEditor: require('@ckeditor/ckeditor5-build-classic')
    }
    setEditorLoaded(true)
  }, [])

  return (
    <div className={styles.container}>
      <Head>
        <title>My CKEditor 5</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h2>Using CKEditor 5 build in Next JS</h2>
      {editorLoaded &&
        <CKEditor
          editor={ ClassicEditor }
          data="<p>Hello from CKEditor 5!</p>"
          onInit={ editor => {
              // You can store the "editor" and use when it is needed.
              console.log( 'Editor is ready to use!', editor );
          } }
          onChange={ ( event, editor ) => {
              const data = editor.getData();
              console.log('ON CHANGE')
              console.log(data)
              // console.log( { event, editor, data } );
          } }
          onBlur={ ( event, editor ) => {
              console.log( 'Blur.', editor );
          } }
          onFocus={ ( event, editor ) => {
              console.log( 'Focus.', editor );
          } }
        />
      }
      
    </div>
  )
}

Daaan hasilnya seperti ini:

Naah contentnya bisa dicapture di onChange, jadi difungsi itu tar bisa dikonekin ke useState trs disimpen di database lewat API. Contohnya seperti ini

Siiipss segini dl ajjah :D

Friday, September 18, 2020

Create my first next.js app

Then type execute these commands:

cd my-app

npm run dev

Done B-)