HarryChen0506 / react-markdown-editor-lite

a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
https://harrychen0506.github.io/react-markdown-editor-lite/
MIT License
1.02k stars 161 forks source link

[Feature Request]: 可以支持插件图标位置自定义么? #299

Open jianhao opened 10 months ago

jianhao commented 10 months ago

功能描述

可以支持自定义插件或者内置插件的位置自定义么? 例如:比如我新增了一个上传文件插件,希望放到图片上传后边,目前只可以选择左右,不能具体选择位置。

建议思路

比如暴露一个方法,可以在初始化之前,对插件位置排序。

目前 hack 解决方式

import React from "react";
import Editor from "react-markdown-editor-lite";
import ReactMarkdown from "react-markdown";
import "react-markdown-editor-lite/lib/index.css";
import FilePlugin from "./plugins/FilePlugin";
import HandleFullScreen from "./plugins/HandleFullScreen";

// hack 代码:注册自定义文件上传插件,并将图标设置图片上传图标后边
MdEditor.use(FilePlugin)
// @ts-ignore
const len = MdEditor?.plugins?.length
// @ts-ignore
const filePluginItem = MdEditor.plugins[len - 1]
// @ts-ignore
const imgPluginIndex = MdEditor?.plugins?.findIndex((item: any) => item?.comp?.name === 'Image')
// @ts-ignore
MdEditor.plugins.splice(len - 1, 1)
// @ts-ignore
MdEditor.plugins.splice(imgPluginIndex + 1, 0, filePluginItem)

export default function App() {
  const mdEditor = React.useRef(null);

  const handleClick = () => {
    if (mdEditor.current) {
      alert(mdEditor.current.getMdValue());
    }
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Get value</button>
      <Editor
        ref={mdEditor}
        style={{
          height: "500px"
        }}
        renderHTML={(text) => <ReactMarkdown source={text} />}
      />
    </div>
  );
}
jianhao commented 9 months ago

更新一下判断图片插件的方式: 原来是通过name判断:

const imgPluginIndex = MdEditor?.plugins?.findIndex((item: any) => item?.comp?.name === 'Image')

编译后class 的 name 会被改写,更新为通过插件名称判断

const imgPluginIndex = MdEditor?.plugins?.findIndex(
  (item: { comp: { pluginName: string } }) => item?.comp?.pluginName === 'image'
)