Nights Editor

一个好用的 QuillEditor 框架。Nice Editor

QuillEditor

| props | type | | ------------- | ----------------------------------------- | | submitRef | RefObject | | content | content | | position | 'top'/'bottom' | | toolbar | boolean | | placeholder | boolean | | maxPictureNum | string | | maxLetter | number | | uploadFile | (file: File) => Promise<string | void> | | setValue | (val: string) => void | | getValue | (val: string) => void |

import { QuillEditor } from "quill-react-editor";
  const [content, setContent] = useState<string>();
  const submitRef = useRef<any>();
  function Index() {
    const [visible, setVisible] = useState(false);
    async function uploadFile(file: File) {
    if (file) {
      console.log("file", file)
      const url = 'https://tse3-mm.cn.bing.net/th/id/OIP-C.h3UCtqDkFOx_yX4npRjy7AHaEo?pid=ImgDet&rs=1'
      return url
      }
    }
    const publish = () => {
      console.log('You have clicked button,the content is ',content)
    }

    return (
      <div>
        <QuillEditor
          position="top"
          setValue={(value: string) => setContent(value)}
          submitRef={submitRef}
          uploadFile={uploadFile}
          maxLetter={500}
          maxPictureNum={6}
          placeholder={"请描述你遇到的问题"}
          toolbar={false}
        />
        <button
        className={styles.publishBtn}
        ref={submitRef}
        onClick={publish}
      >
        发布
      </button>
      </div>
    );
}

未完待续...