如何在在Vue3中使用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 或者 html 文本如何渲染在页面上？

1.渲染保存后的 markdown 文本

方式一：如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如

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

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

export default {
  setup () {
    const markdown = ref(\'\');
    
    return {
      markdown
    }
  }
}
</script>

方式二：如果你的项目不需要编辑功能，只需要渲染 markdown 文本你可以只引入 preview 组件来渲染。例如

// main.js
import { creatApp } from \'vue\';
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);

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

app.use(VMdPreview);

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

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

export default {
  setup () {
    const markdown = ref(\'\');
    
    return {
      markdown
    }
  }
}
</script>

2.渲染保存后的 html 文本

如果你的项目不需要编辑功能，只需要渲染 html 你可以只引入 preview-html 组件来渲染。例如：

// main.js
import { creatApp } from \'vue\';
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\';

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

app.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>
import { ref } from \'vue\';

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

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

以上就是如何在在Vue3中使用markdown 编辑器组件的详细内容，更多关于Vue3中使用markdown 编辑器组件的资料请关注其它相关文章！