本文主要是介绍好用的 Markdown 编辑器组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
ByteMD
bytedance/bytemd: ByteMD v1 repository (github.com)
这里由于我的项目是 Next,所以安装 @bytemd/react, 阅读官方文档,执行命令来安装编辑器主体、以及 gfm(表格支持)插件、highlight 代码高亮插件:
npm i @bytemd/react
npm i @bytemd/plugin-highlight @bytemd/plugin-gfm
但是浏览器的样式不好看,我们可以引入第三方主题:
github-markdown-css
npm install github-markdown-css
import 'github-markdown-css/github-markdown-light.css';
然后使用组件:
src/components/MdEditor/index.tsx
import { Editor } from "@bytemd/react";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import 'github-markdown-css/github-markdown-light.css';
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "./index.css";interface Props {value?: string;onChange?: (v: string) => void;placeholder?: string;
}const plugins = [gfm(), highlight()];/*** Markdown 编辑器* @param props* @constructor*/
const MdEditor = (props: Props) => {const { value = "", onChange, placeholder } = props;return (<div className="md-editor"><Editorvalue={value || ""}placeholder={placeholder}mode="split"plugins={plugins}onChange={onChange}/></div>);
};export default MdEditor;
把 MdEditor 当前输入的值暴露给父组件,便于父组件去使用,同时也是提高组件的通用性,所以定义了属性和属性类型,把 value 和 onChange 事件交给父组件去管理。
src/components/MdEditor/index.css
.md-editor {.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {display: none;}
}
隐藏编辑器中不需要的操作图标(像 GitHub 图标)
编辑好文本,自然有浏览文本的地方,所以浏览器:
src/components/MdViewer/index.tsx
import { Viewer } from "@bytemd/react";
import gfm from "@bytemd/plugin-gfm";
import highlight from "@bytemd/plugin-highlight";
import 'github-markdown-css/github-markdown-light.css';
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "./index.css";interface Props {value?: string;
}const plugins = [gfm(), highlight()];/*** Markdown 浏览器* @param props* @constructor*/
const MdViewer = (props: Props) => {const { value = "" } = props;return (<div className="md-viewer"><Viewer value={value} plugins={plugins} /></div>);
};export default MdViewer;
src/components/MdViewer/index.css
.md-viewer {.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {display: none;}
}
可以在任意客户端渲染页面(或组件)引入组件进行测试,这是因为该组件用到了 useRef 之类的仅客户端才支持的函数。
const [text, setText] = useState<string>('');<MdEditor value={text} onChange={setText} />
<MdViewer value={text} />
md-editor-v3
文本编辑器/md-editor-v3 (gitee.com)
这个是之前写 Vue3 用过的一个编辑器,也很不错,用法简单,同样支持 Vue、React 等。
安装
yarn add md-editor-v3
更多使用及贡献方式参考:md-editor-extension
编辑器模式
<template><MdEditor v-model="text" />
</template><script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';const text = ref('# Hello Editor');
</script>
仅预览模式
<template><MdPreview :editorId="id" :modelValue="text" /><MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template><script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>
这篇关于好用的 Markdown 编辑器组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!