vue3 + ts 集成markdown编辑器

### Vue3 和 TypeScript 集成 Markdown 编辑器的方法 以下是如何在 Vue3 和 TypeScript 项目中集成 Markdown 编辑器的详细指南。我们将使用 `vue-markdown-loader` 来加载 `.md` 文件，并结合 Milkdown 构建一个所见即所得的 Markdown 编辑器。 --- #### 安装依赖项 首先，安装必要的依赖库： ```bash npm install vue-markdown-loader milkdown @milkdown/vue @milkdown/preset-commonmark @milkdown/plugin-prism -D ``` - `vue-markdown-loader`: 将 Markdown 文件解析为 Vue 组件。 - `milkdown`: 提供核心功能以构建 Markdown 编辑器。 - `@milkdown/vue`: 用于将 Milkdown 整合到 Vue 应用程序中。 - `@milkdown/preset-commonmark`: 支持标准 Markdown 语法。 - `@milkdown/plugin-prism`: 提供代码高亮支持。 --- #### Webpack 配置 修改 `webpack.config.js` 或类似的配置文件，添加对 `.md` 文件的支持： ```javascript module.exports = { module: { rules: [ { test: /\.md$/, loader: 'vue-markdown-loader', options: { wrapper: 'article', // 自定义包裹标签 }, }, ], }, }; ``` 对于 TypeScript 项目，还需要创建一个类型声明文件以便正确导入 `.md` 文件。在 `src/typings/markdown.d.ts` 中添加以下内容： ```typescript declare module '*.md' { import { ComponentOptions } from 'vue'; const component: ComponentOptions; export default component; } ``` --- #### 创建 Markdown 编辑器组件 以下是一个基于 Milkdown 的 Vue3 和 TypeScript 示例组件： ```vue <template> <div class="editor-container"> <MilkdownEditor /> </div> </template> <script lang="ts"> import { defineComponent, onMounted, onBeforeUnmount } from 'vue'; import { Editor, editorViewContext, rootCtx } from '@milkdown/core'; import { commonmark } from '@milkdown/preset-commonmark'; import { vuePlugin } from '@milkdown/vue'; import { prism } from '@milkdown/plugin-prism'; export default defineComponent({ name: 'MarkdownEditor', setup() { let editorInstance: Editor | null = null; const initEditor = async () => { editorInstance = await Editor.make() .use(rootCtx.provide(document.getElementById('editor')!)) .use(commonmark) .use(vuePlugin()) .use(prism) .run(); }; onMounted(() => { initEditor(); }); onBeforeUnmount(() => { if (editorInstance) { editorInstance.destroy(); } }); return {}; }, }); </script> <style scoped> .editor-container { width: 100%; height: 500px; border: 1px solid #ccc; } #editor { padding: 1rem; font-family: Arial, sans-serif; } </style> ``` --- #### 解析 Markdown 文件为 Vue 组件 假设有一个名为 `README.md` 的 Markdown 文件，我们可以在模板中直接引入它： ```vue <template> <div> <component :is="'readme'" /> </div> </template> <script lang="ts"> import readme from './path/to/README.md'; // 动态解析为 Vue 组件 export default { components: { readme, }, }; </script> ``` 这样就可以轻松地将 Markdown 文件嵌入到 Vue 页面中[^1]。 --- #### 插件扩展与自定义 Milkdown 是插件驱动的框架，允许用户根据需求定制编辑器的功能。例如，可以添加新的 Markdown 语法或调整默认主题。以下是启用 PrismJS 进行代码高亮的例子： ```typescript import { prism } from '@milkdown/plugin-prism'; const editor = Editor.make() .use(prism) // 启用代码高亮 .run(); ``` 更多高级功能可以参考官方文档[^2]。 --- ###