title: Markdown sidemenu: false

JMarkdown.Editor 组件

这个组件自带了一些 Pro 的配置，你一般都需要改掉它的信息。

import React, { useState } from "react";
import JMarkdown from "@jzo/markdown";

export default () => {
  const valueInit = `
~~~jsx
  import { Button, Menu } from 'antd';
  import React from 'react';
  import HeaderDropdown from '@/components/HeaderDropdown';

  export default () => {
    const menuHeaderDropdown = (
      <Menu selectedKeys={[]}>
        <Menu.Item key="center">个人中心</Menu.Item>
        <Menu.Item key="settings">个人设置</Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">退出登录</Menu.Item>
      </Menu>
    );
    return (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <Button>hover 展示菜单</Button>
      </HeaderDropdown>
    );
  };
  </JMarkdown> ~~~
  `;

  const [value, setValue] = useState(valueInit);
  const onEditor = (e) => {
    setValue(e);
  };

  return <JMarkdown.Editor value={value} onChange={onEditor} />;
};

API

| 参数 | 说明 | 类型 | 默认值 | | ---------------- | ------------------------------------------------------- | ---------------------------- | ------ | | value | 输入框的值 | string | - | | onChange | 值修改后触发 | (value) => void | - | | theme | 皮肤 | string | - | | hideMarkNav | 是否开启目录 | boolean | false | | headingTopOffset | 相对于窗顶位移的锚定 | number | 0 | | ordered | 标题是否包含数字前缀 | boolean | true | | remarkPlugins | 插件列表 | (visible: boolean) => void | - | | components | 将标记名映射到组件的对象 | object | {} | | config | 工具栏设置 | object | {} | | onImageUpload | 上传返回图片地址 | () => Promise | - | | markdownProps | 组件参数 https://github.com/remarkjs/react-markdown | - | - |

JMarkdown 展示

一个带补全数据的输入框，支持收起和展开 Input

/**
 * background: '#f0f2f5'
 */
import { Button, Menu } from "antd";
import React from "react";
import JMarkdown from "@jzo/markdown";

export default () => {
  const value = `## 展示菜单
  | 参数          | 说明                                                    | 类型      | 默认值 |
| ------------- | ------------------------------------------------------- | --------- | ------ |
| value         | 输入框的值                                              | string  | -      |
| theme         | 皮肤                                                    | string  | -      |
| components    | 将标记名映射到组件的对象                                | object  | {}     |
| remarkPlugins | 输入框默认是否显示，只有第一次生效                      | boolean | -      |
| 其他          | 组件参数 [https://github.com/remarkjs/react-markdown]() | -       | -      |
  ~~~jsx
  import { Button, Menu } from 'antd';
  import React from 'react';
  import HeaderDropdown from '@/components/HeaderDropdown';

  export default () => {
    const menuHeaderDropdown = (
      <Menu selectedKeys={[]}>
        <Menu.Item key="center">个人中心</Menu.Item>
        <Menu.Item key="settings">个人设置</Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">退出登录</Menu.Item>
      </Menu>
    );
    return (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <Button>hover 展示菜单</Button>
      </HeaderDropdown>
    );
  };
  </JMarkdown> ~~~

  ### 个人中心
  `;
  return <JMarkdown>{value}</JMarkdown>;
};

API

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ------------------------------------------------------- | --------- | ------ | | value | 输入框的值 | string | - | | theme | 皮肤 | string | - | | components | 将标记名映射到组件的对象 | object | {} | | remarkPlugins | 输入框默认是否显示，只有第一次生效 | boolean | - | | plugins | 插件列表 |array | [] | 其他 | 组件参数 https://github.com/remarkjs/react-markdown | - | - |

plugins 插件列表

[ "header", "font-bold", "font-italic", "font-underline", "font-strikethrough", "list-unordered", "list-ordered", "block-quote", "block-wrap", "block-code-inline", "block-code-block", "table", "image", "link", "clear", "logger", "mode-toggle", "full-screen", "tab-insert", ]

theme 皮肤

a11yDark,a11yLight,agate,anOldHope ,androidstudio ,arduinoLight, arta, ascetic, atelierCaveDark, atelierCaveLight, atelierDuneDark, atelierDuneLight, atelierEstuaryDark, atelierEstuaryLight, atelierForestDark, atelierForestLight, atelierHeathDark, atelierHeathLight, atelierLakesideDark, atelierLakesideLight, atelierPlateauDark, atelierPlateauLight, atelierSavannaDark, atelierSavannaLight, atelierSeasideDark, atelierSeasideLight, atelierSulphurpoolDark, atelierSulphurpoolLight, atomOneDarkReasonable, atomOneDark, atomOneLight, brownPaper, codepenEmbed, colorBrewer, darcula, dark, defaultStyle, docco, dracula, far, foundation, githubGist, github, gml, googlecode, gradientDark, grayscale, gruvboxDark, gruvboxLight, hopscotch, hybrid, idea, irBlack, isblEditorDark, isblEditorLight, kimbieDark, kimbieLight, lightfair, lioshi, magula, monoBlue, monokaiSublime, monokai, nightOwl, nnfxDark, nnfx, nord, obsidian, ocean, paraisoDark, paraisoLight, pojoaque, purebasic, qtcreatorDark, qtcreatorLight, railscasts, rainbow, routeros, schoolBook, shadesOfPurple, solarizedDark, solarizedLight, srcery ,sunburst ,tomorrowNightBlue ,tomorrowNightBright ,tomorrowNightEighties ,tomorrowNight ,tomorrow ,vs ,vs2015 ,xcode ,xt256 ,zenburn

注意

样式冲突请用重写样式解决

卸载内置插件

import JMarkdown , { Plugins } from "@jzo/markdown";
JMarkdown.unuse(Plugins.Header); // header
JMarkdown.unuse(Plugins.FontBold); // font-bold

编写插件

函数组件

同样可以使用函数组件来编写插件

import React from 'react';
import JMarkdown from "@jzo/markdown";

const Counter = ({editor, editorConfig, config, pluginName}) => {
  console.log(editor,editorConfig,config,pluginName)

  const [num, setNum] = React.useState(config.start);

  const handleClick = () => {
    // 调用API，往编辑器中插入一个数字
    editor.insertText(num);
    // 更新一下自身的state
    setNum(num + 1);
  }
  return (
    <span
      className="button button-type-counter"
      title="Counter"
      onClick={handleClick}
    >
      123213213
    </span>
  );
}
// 如果需要的话，可以在这里定义默认选项
Counter.defaultConfig = {
  start: 0
}
// 定义按钮被防止在哪个位置，默认为左侧，还可以放置在右侧（right）
Counter.align = 'left';
// 这里定义插件名称，注意不能重复
Counter.pluginName = 'counter';


// 使用：
JMarkdown.Editor.use(Counter, {
  start: 10
});

更新

0.0.1 组件发布 0.0.2 修改REANME.md说明