안녕하세요 라이브러리에서 테이블 기능을 문의드립니다

[suCozy]

현재 nextjs13버전에서 에디터 사용하려고 합니다

이미지 리사이징, 정렬은 추가가 잘되는데 테이블 기능이 추가가 안되 혹시 방법이 있을까 해 여쭤봅니다

제 코드는 아래와 같으며 quill-better-table를 적용했는데 에러가 나 다른 플러그인을 도입하려고 했습니다

혹시 정보 공유 가능하시다면 알려주시면 감사합니다

import React from 'react';

import QuillBetterTable from 'quill-better-table';
import BlotFormatter from 'quill-blot-formatter';
import * as QuillTableUI from 'quill-table-ui';
import { useQuill } from 'react-quilljs';

import { uploadFile } from '@http/file.http';

export default function () {
  const modules = {
    toolbar: [['bold', 'italic', 'underline', 'strike', 'image', 'table']],
    blotFormatter: {},
    // table: true,
    tableUI: true,
  };
  const theme = 'snow';

  const formats = ['bold', 'italic', 'underline', 'strike', 'table'];

  const { quill, quillRef, Quill } = useQuill({ theme, modules, formats });

  // 모듈 추가
  if (Quill && !quill) {
    Quill.register('modules/blotFormatter', BlotFormatter);
    Quill.register(
      {
        'modules/tableUI': QuillTableUI.default,
      },
      true
    );
  }

  // Insert Image(selected by user) to quill
  const insertToEditor = (url) => {
    console.log('url');
    console.log(url);
    const range = quill.getSelection();
    quill.insertEmbed(range.index, 'image', url);
  };

  // Upload Image to Image Server such as AWS S3, Cloudinary, Cloud Storage, etc..
  const saveToServer = async (file) => {
    const res = await uploadFile({ file });

    console.log('res');
    console.log(res);
    insertToEditor(res.data?.Location);
    console.log('quill');
    console.log(quill);
    // const range = quill.getEditorSelection();

    // quill.getEditor().insertEmbed(range.index, 'image', data.data.Location);
  };

  // Open Dialog to select Image File
  const selectLocalImage = () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = () => {
      const file = input.files && input.files[0];
      saveToServer(file);
    };
  };

  React.useEffect(() => {
    if (quill) {
      // Add custom handler for Image Upload
      quill.getModule('toolbar').addHandler('image', selectLocalImage);
    }

    if (quill) {
      quill.on('text-change', (delta, oldDelta, source) => {
        // console.log('Text change!');
        // console.log(quill.getText()); // Get text only
        // console.log(quill.getContents()); // Get delta contents
        // console.log(quill.root.innerHTML); // Get innerHTML using quill
        // console.log(quillRef.current.firstChild.innerHTML); // Get innerHTML using quillRef
      });
    }
  }, [quill]);

  return (
    <div>
      <div ref={quillRef} />
    </div>
  );
}

[gtgalone]

Hi @suCozy!

Could you try with this link below?

https://github.com/gtgalone/react-quilljs#magic-url

[suCozy]

hi @gtgalone

매직 url과 테이블 삽입 기능이 관계가 있나요??

[gtgalone]

Magic url is also using plugin package from npm.

you should try with that. it looks similar code.