@dzc/markdown
v0.0.1
Published
基于react-markdown,react-markdown-editor-lite,markdown-navbar封装组件支持预览和编辑,代码高亮。
Downloads
2
Readme
title: GMarkdown sidemenu: false
此功能由dumi提供,dumi 是一个 📖 为组件开发场景而生的文档工具,用过的都说好。
GMarkdown.Editor 组件
这个组件自带了一些 Pro 的配置,你一般都需要改掉它的信息。
import React, { useState } from "react";
import GMarkdown from "@dzc/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>
);
};
</GMarkdown> ~~~
`;
const [value, setValue] = useState(valueInit);
const onEditor = (e) => {
setValue(e);
};
return <GMarkdown.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 | -
| - |
GMarkdown 展示
一个带补全数据的输入框,支持收起和展开 Input
/**
* background: '#f0f2f5'
*/
import { Button, Menu } from "antd";
import React from "react";
import GMarkdown from "@dzc/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>
);
};
</GMarkdown> ~~~
### 个人中心
`;
return <GMarkdown>{value}</GMarkdown>;
};
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 GMarkdown , { Plugins} from "@dzc/markdown";
GMarkdown.unuse(Plugins.Header); // header
GMarkdown.unuse(Plugins.FontBold); // font-bold
编写插件
函数组件
同样可以使用函数组件来编写插件
import React from 'react';
import GMarkdown from "@dzc/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';
// 使用:
GMarkdown.Editor.use(Counter, {
start: 10
});