Vue Markdown编辑器toast-ui/editor_toast-ui/vue-editor

1、安装

yran add @toast-ui/editor

2、完整示例

<template>

  <div class="page-container">

    <div id="editor" style="width: 100%; height: 100%;"/>

    <n-flex justify="end" class="operation-container">

      <n-button type="primary" @click="saveToLocal"><n-icon size="16"><SaveOutline /></n-icon>保存到本地</n-button>

      <n-button type="primary" @click="saveToServe"><n-icon size="16"><PaperPlaneOutline /></n-icon>保存到服务器</n-button>

    </n-flex>

    <div class="toastui-editor-contents">

      <div v-html="htmlText"></div>

    </div>

  </div>

</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue';

import Editor from '@toast-ui/editor';

import '@toast-ui/editor/dist/toastui-editor.css';

import { SaveOutline } from '@vicons/ionicons5'

import { PaperPlaneOutline } from '@vicons/ionicons5'

import axios from 'axios'

import { useMessage } from 'naive-ui'