125 lines
2.9 KiB
TypeScript
125 lines
2.9 KiB
TypeScript
import "vditor/dist/index.css";
|
|
import Vditor from "vditor";
|
|
import { useEffect, useRef } from "react";
|
|
import "./index.less";
|
|
import { message } from "antd";
|
|
|
|
interface IProps {
|
|
onChange?: Function;
|
|
styles?: React.CSSProperties;
|
|
id: string;
|
|
defaultValue?: string;
|
|
}
|
|
|
|
const emoji = {
|
|
"+1": "👍",
|
|
"-1": "👎",
|
|
confused: "😕",
|
|
eyes: "👀️",
|
|
heart: "❤️",
|
|
rocket: "🚀️",
|
|
smile: "😄",
|
|
tada: "🎉️",
|
|
};
|
|
|
|
const toolbar = [
|
|
"emoji",
|
|
"headings",
|
|
"bold",
|
|
"italic",
|
|
"strike",
|
|
"link",
|
|
"|",
|
|
"list",
|
|
"ordered-list",
|
|
"check",
|
|
"outdent",
|
|
"indent",
|
|
"|",
|
|
"quote",
|
|
"line",
|
|
"code",
|
|
"inline-code",
|
|
"insert-before",
|
|
"insert-after",
|
|
"|",
|
|
"upload",
|
|
// "record",
|
|
"table",
|
|
"|",
|
|
"undo",
|
|
"redo",
|
|
"|",
|
|
"fullscreen",
|
|
"edit-mode",
|
|
{
|
|
name: "more",
|
|
toolbar: [
|
|
"both",
|
|
"code-theme",
|
|
"content-theme",
|
|
"export",
|
|
"outline",
|
|
"preview",
|
|
"devtools",
|
|
"info",
|
|
"help",
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function Guide(props: IProps) {
|
|
const vditorRef = useRef<Vditor>();
|
|
|
|
const submitTool = {
|
|
name: "submit",
|
|
tipPosition: "s",
|
|
tip: "提交",
|
|
className: "right",
|
|
icon: '<svg viewBox="0 0 1024 1024"><path d="M385 840.5c-20.8 0-41.7-7.9-57.6-23.8L87.6 576.9c-31.8-31.8-31.8-83.3 0-115.1s83.3-31.8 115.1 0l239.8 239.8c31.8 31.8 31.8 83.3 0 115.1-15.9 15.9-36.7 23.8-57.5 23.8z" fill="#1296db" p-id="25510"></path><path d="M384.6 840.5c-20.8 0-41.7-7.9-57.6-23.8-31.8-31.8-31.8-83.3 0-115.1l494.2-494.2c31.8-31.8 83.3-31.8 115.1 0s31.8 83.3 0 115.1L442.2 816.7c-15.9 15.9-36.8 23.8-57.6 23.8z" fill="#1296db"></path></svg>',
|
|
click() {
|
|
const value = vditorRef.current?.getValue();
|
|
const html = vditorRef.current?.getHTML();
|
|
if (props.onChange) props.onChange({ value, html });
|
|
},
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (props.defaultValue)
|
|
vditorRef.current = new Vditor("vditor", {
|
|
height: 600,
|
|
cache: {
|
|
id: props.id,
|
|
enable: false,
|
|
},
|
|
toolbar: [...toolbar, "|", submitTool],
|
|
value: props.defaultValue ?? "",
|
|
hint: { delay: 200, emoji },
|
|
counter: { enable: true },
|
|
preview: { actions: ["desktop", "mobile"] },
|
|
after: () => console.log("[info] vditor init success..."),
|
|
upload: {
|
|
accept: "image/*",
|
|
url: "/api/vod/oss/image/upload",
|
|
multiple: false,
|
|
success(_, res) {
|
|
const { code, data, msg } = JSON.parse(res);
|
|
if (code === 10000) {
|
|
message.success("上传成功");
|
|
const { name, url } = data;
|
|
vditorRef.current?.insertValue(``);
|
|
} else {
|
|
message.error(msg);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
}, [props.defaultValue]);
|
|
|
|
return (
|
|
<div style={{ ...props.styles }}>
|
|
<div id="vditor" className="vditor" />
|
|
</div>
|
|
);
|
|
}
|