海外网站建设教程,厦门网站建设屈兴东,做视频的模板下载网站,网络营销策划方案3000字ByteMD
bytedance/bytemd: ByteMD v1 repository (github.com)
这里由于我的项目是 Next#xff0c;所以安装 bytemd/react#xff0c; 阅读官方文档#xff0c;执行命令来安装编辑器主体、以及 gfm#xff08;表格支持#xff09;插件、highlight 代码高亮插件#xf…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-cssimport 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 classNamemd-editorEditorvalue{value || }placeholder{placeholder}modesplitplugins{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 classNamemd-viewerViewer 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] useStatestring();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
编辑器模式
templateMdEditor v-modeltext /
/templatescript setup
import { ref } from vue;
import { MdEditor } from md-editor-v3;
import md-editor-v3/lib/style.css;const text ref(# Hello Editor);
/script仅预览模式
templateMdPreview :editorIdid :modelValuetext /MdCatalog :editorIdid :scrollElementscrollElement /
/templatescript 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
