快捷導(dǎo)航

如何在在Vue3中使用markdown 編輯器組件

更新時(shí)間：2021年05月25日 11:00:37 作者：ckang1229

vue3發(fā)布正式版不久，生態(tài)還沒完全發(fā)展起來，目前支持vue3的開源markdown編輯器組件基本上也寥寥無幾，向大家推薦一個(gè)很好用的v-md-editor 組件，組件功能很強(qiáng)大，文檔也比較詳細(xì)。該文章只介紹組件的常用功能，更多高級(jí)的功能可以參考官方文檔。

安裝

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

基礎(chǔ)用法

<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 文本

方式一：如果你的項(xiàng)目中引入了編輯器。你可以直接使用編輯器的預(yù)覽模式來渲染。例如

<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>

方式二：如果你的項(xiàng)目不需要編輯功能，只需要渲染 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 文本

如果你的項(xiàng)目不需要編輯功能，只需要渲染 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>

更多高級(jí)用法參考官方文檔：v-md-editor

以上就是如何在在Vue3中使用markdown 編輯器組件的詳細(xì)內(nèi)容，更多關(guān)于Vue3中使用markdown 編輯器組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: