安装

npm install for-editor -S

for-editor

使用配置

import Editor from "for-editor";
import { SetStateAction, useState, useRef } from "react";
const Toolbars = {
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: true, // 预览
  expand: true, // 全屏
  /* v0.0.9 */
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  /* v0.2.3 */
  subfield: true, // 单双栏模式
};
function releasepage() {
  const [mdContent, setMdContent] = useState<string>("");
  const editorRef = useRef<any>(null); //操作dom节点
  const handleEditorChange = (value: SetStateAction<string>) => {
    console.log(value);
    setMdContent(value);
  };
  // 图片上传
  const addImg = (_file: File) => {
    console.log(_file);
    console.log(editorRef);
    console.log(editorRef.current);
    editorRef.current!.$img2Url(_file.name, "file_url");//file_url 上传服务器后得到的地址
  };
  return (
    <div className="p-2 h-full">
      <div className="bg-white h-full rounded p-2 overflow-y-auto">
        <Editor
          ref={editorRef}
          value={mdContent}
          toolbar={Toolbars}
          addImg={($file: File) => addImg($file)}
          onChange={handleEditorChange}
        />
      </div>
    </div>
  );
}
export default releasepage;

移动设备适配兼容css

.for-container .for-toolbar>ul {
    flex-wrap: wrap;
}