??? ??? ??? ???? ?? ?? ??? ?? ??? ??? ? ?? ?? ??? ???? ???? ?? ?????. QuillJS? ?? ?? React ??? React Quill? ????? ??? ???? ???? ????. ??? ??? ???? ??? ???? ? ??? ??? ? ????.

? ????? ???? ???? ???? ?? ???? ? ??? React Quill? ??? ??? ??? ???? ??? ???????.

---

React Quill ??

??? ???? ???? ?? React Quill? ?? ? ???? ??? ?????.

npm install react-quill

?? React Quill ??? ???? ? ??:

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const Editor = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} />
  );
};

export default Editor;

---

??? ??? ??? ??

??? ???? ?????? Quill ?? ??? ??? ???? ??? ???? ???? ???.

1??: ?? ?? ??? ??

??? ??? ?? ??:

const modules = {
  toolbar: [
    ['bold', 'italic', 'underline'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image'],
  ],
};

2??: ??? ?? ??? ??? ??

??? ???? ???? ???? ??? ??? ????? ???? ??? ? ????. ?? ??? ??? ????.

const handleImageUpload = () => {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');

  input.addEventListener('change', async () => {
    const file = input.files[0];
    if (file) {
      const formData = new FormData();
      formData.append('image', file);

      // Replace with your API endpoint
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });

      const data = await response.json();
      const imageUrl = data.url;

      const quill = this.quill;
      const range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', imageUrl);
    }
  });

  input.click();
};

3??: ??? ??

?? ??? ???? ?????.

const modules = {
  toolbar: {
    container: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image'],
    ],
    handlers: {
      image: handleImageUpload,
    },
  },
};

const EditorWithImageUpload = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
  );
};

export default EditorWithImageUpload;

---

??? ???? ?? ??? ??

???? ?? ???? ???? ???? ???? URL? ???? ???. ??? Node.js? Express? ??? ????.

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  const imageUrl = `/uploads/${file.filename}`; // Replace with your storage logic
  res.json({ url: imageUrl });
});

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

app.listen(3000, () => console.log('Server running on port 3000'));

---

???? ??? ??? ??

CSS? ???? ????? ??? ???? ??? ? ????. ?:

.ql-editor img {
  max-width: 100%;
  height: auto;
}

---

??

React Quill? ??? ??? ??? ???? ??? ??? ??? ?? ???? ?????. ?? ??? ??? ???? ??? ?? ??? ???? ???? ???? ???? ???? ????? ??? ? ????. ?? ?? ???? ???? ??? ???? ???? ??????? ?? ?? ??? ?? ???? ?? ? ????.

---

????

1. React Quill ??
2. QuillJS ??
3. ?? ??
4. React Quill ????

? ??? React Quill?? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!