纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue3中使用markdown 编辑器组件 怎样在在Vue3中使用markdown 编辑器组件

ckang1229   2021-05-25 我要评论
想了解怎样在在Vue3中使用markdown 编辑器组件的相关内容吗,ckang1229在本文为您仔细讲解Vue3中使用markdown 编辑器组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue,markdown,Vue,编辑器组件,下面大家一起来学习吧。

安装

# 使用 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


相关文章

猜您喜欢

  • Python cmd获得.py参数 怎样从Python的cmd中获得.py文件参数

    想了解怎样从Python的cmd中获得.py文件参数的相关内容吗,橘子甜不甜在本文为您仔细讲解Python cmd获得.py参数的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Python,cmd,.py文件参数,下面大家一起来学习吧。..
  • python破解linux密码 Python脚本激活Linux密码的方法(crypt模块)

    想了解Python脚本激活Linux密码的方法(crypt模块)的相关内容吗,谢公子在本文为您仔细讲解python破解linux密码的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python破解linux密码,python,crypt模块,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.moon-script.com 【月光下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式