当我连接 NEXTJS react-quill 时，quill 不起作用。
我在我的网站上附加了一根羽毛笔。当我连接 Quill 时，代码是类组件。然后我切换到箭头功能。处理 create.js 文件时出错：
import React, { useState, useRef } from "react";
import dynamic from "next/dynamic";
import axios from "axios";
import Main from "../../layouts/main";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import cookie from "react-cookies";
import { withRouter } from "next/router";
import Link from "next/link";
const MyComponent = (props) => {
const [state, setState] = useState({
editorHtml: "",
title: "",
image: {},
message: "",
error_message: "",
error_type: "",
category_id: 1,
token: cookie.load("userToken"),
});
const handleChange = (html) => {
setState({ editorHtml: html });
};
const selectImage = (image) => {
console.log(image);
};
const onSubmitForm = (event) => {
event.preventDefault();
const image = document.querySelector("#image").files[0];
const formData = new FormData();
formData.append("image", image);
formData.append("title", this.state.title);
formData.append("text", this.state.editorHtml);
formData.append("category_id", this.state.category_id);
if (this.state.title.length <= 255) {
axios
.post("http://exapmle.com/api/post/store", formData, {
headers: {
"Access-Control-Allow-Origin": "*",
"Content-Type": "multipart/form-data",
Authorization: "Bearer" + this.state.token,
},
})
.then((res) => {
if (res.data.success == true) {
this.setState({ message: "Blog created!" });
setTimeout(() => {
this.setState({ message: "" });
this.props.router.push("/");
}, 5000);
}
});
}
if (this.state.title.length >= 256) {
this.setState({
error_type: "title",
error_message: "Blog name error!",
});
}
};
const apiPostNewsImage = (data) => {
axios
.post("http://exapmle.com/api/image-upload", data, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => console.log(res));
};
const imageHandler = () => {
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
input.onchange = async () => {
const file = input.files[0];
const formData = new FormData();
formData.append("image", file);
// Save current cursor state
const range = quill.getSelection(true);
// Insert temporary loading placeholder image
// this.quill.insertEmbed(range.index, "ssurat");
// Move cursor to right side of image (easier to continue typing)
quill.setSelection(range.index + 1);
const res = await axios.post(
"http://exapmle.com/api/image-upload",
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
); // API post, returns image location as string e.g. 'http://www.example.com/images/foo.png'
// Remove placeholder image
quill.deleteText(range.index, 1);
// Insert uploaded image
// this.quill.insertEmbed(range.index, 'image', res.body.image);
quill.insertEmbed(range.index, "image", res.data);
};
};
return (
<Main title="Create blog">
<section className="col-12 col-lg-9 shadow bg-white p-3">
{state.token && (
<form
className="row my-4 col-11 col-lg-8 mx-auto"
onSubmit={(event) => onSubmitForm(event)}
>
<h5 className="title col-12 my-3"> Create blog </h5>
{state.message && (
<div className="alert alert-success">{state.message}</div>
)}
<div className="col-12">
<small className="text-danger p-1"></small>
<div className="input-group p-1">
<div className="custom-file">
<input
type="file"
name="image"
id="image"
className="custom-file-input"
onChange={(event) =>
setState({
...state,
image: event.target.files[0],
})
}
id="image"
required
/>
<label
className="custom-file-label"
data-browse="Select"
htmlFor="image"
aria-describedby="image"
>
Image blog
</label>
</div>
</div>
</div>
<div className="col-12 col-lg-6">
<small className="text-danger p-1 col-12"></small>
<div className="form-label-group p-1">
<input
name="title"
type="text"
id="title"
onChange={(event) =>
setState({
...state,
title: event.target.value,
})
}
className={
state.error_type == "title"
? "form-control border border-danger"
: "form-control"
}
// border border-danger
placeholder="Category name"
autoFocus={true}
required
/>
<label htmlFor="title"> Blog name </label>
{state.error_type == "title" && state.error_message && (
<div className="text-danger">{state.error_message}</div>
)}
</div>
</div>
<div className="col-12 col-lg-6 mt-3">
<div className="form-label-group p-1">
<select name="category_id" className="form-control">
<option value="1"> Category</option>
</select>
</div>
</div>
<div className="col-12">
<ReactQuill
ref={(el) => {
quill = el;
}}
onChange={handleChange}
placeholder={props.placeholder}
modules={{
toolbar: {
container: [
[
{ header: "1" },
{ header: "2" },
{ header: [3, 4, 5, 6] },
{ font: [] },
],
[{ size: [] }],
["bold", "italic", "underline", "strike", "blockquote"],
[{ list: "ordered" }, { list: "bullet" }],
["link", "image", "video"],
["clean"],
["code-block"],
],
handlers: {
image: imageHandler,
},
},
}}
/>
</div>
<button className="btn btn-success mx-auto mt-5">
Create blog
</button>
</form>
)}
{!state.token && (
<div className="alert alert-warning d-flex align-items-center d-flex flex-wrap">
this alert
</div>
)}
</section>
</Main>
);
};
export default withRouter(MyComponent);
这行不通
ref={(el) => {
quill = el;
}}
当我连接 NEXTJS react-quill 时，quill 不起作用。