关于vue3:在-vue-3-中使用-markdown-编辑器

装置

# 应用 npm
npm i @kangc/v-md-editor@next -S

# 应用 yarn
yarn add @kangc/v-md-editor@next

引入组件

import {creatApp} from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdEditor.use(githubTheme);

const app = creatApp(/*...*/);

app.use(VMdEditor);

根底用法

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
import {ref} from 'vue';

export default {setup () {const text = ref('');

        return {text}
    }
}
</script>

保留后的 markdown 文本如何渲染在页面上？

如果你的我的项目中引入了编辑器。你能够间接应用编辑器的预览模式来渲染。例如：

1. 渲染 markdown 文本

如果你的我的项目中引入了编辑器。你能够间接应用编辑器的预览模式来渲染。例如：

<template>
  <v-md-editor :value="markdown" mode="preview"></v-md-editor>
</template>

<script>
export default {data() {
    return {markdown: '### 题目',};
  },
};
</script>

如果你的我的项目不须要编辑性能，只须要渲染 markdown 你能够只引入 preview 组件来渲染。例如：

// main.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// 引入你所应用的主题 此处以 github 主题为例
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdPreview.use(githubTheme);
Vue.use(VMdPreview);

<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
export default {data() {
    return {markdown: '### 题目',};
  },
};
</script>

2. 渲染 html 文本

如果你的我的项目不须要编辑性能，只须要渲染 html 你能够只引入 preview-html 组件来渲染。例如：

// main.js
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import '@kangc/v-md-editor/lib/style/preview-html.css';

// 引入应用主题的款式
import '@kangc/v-md-editor/lib/theme/style/vuepress';

Vue.use(VMdPreviewHtml);

<template>
  <!-- preview-class 为主题的款式类名，例如 vuepress 就是 vuepress-markdown-body -->
  <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
</template>

<script>
export default {data() {
    return {html: '<div data-v-md-line="1"><h1 align="center">Markdown Editor built on Vue</h1>',};
  },
};
</script>

更多高级用法参考官网文档：v-md-editor