Closed suCozy closed 1 year ago
현재 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> ); }
Hi @suCozy!
Could you try with this link below?
https://github.com/gtgalone/react-quilljs#magic-url
hi @gtgalone
매직 url과 테이블 삽입 기능이 관계가 있나요??
Magic url is also using plugin package from npm.
you should try with that. it looks similar code.
현재 nextjs13버전에서 에디터 사용하려고 합니다
이미지 리사이징, 정렬은 추가가 잘되는데 테이블 기능이 추가가 안되 혹시 방법이 있을까 해 여쭤봅니다
제 코드는 아래와 같으며 quill-better-table를 적용했는데 에러가 나 다른 플러그인을 도입하려고 했습니다
혹시 정보 공유 가능하시다면 알려주시면 감사합니다