vue3安装md-editor-v3

前言

 官方文档

安装

# yarn add md-editor-v3
npm i md-editor-v3

MdEditor.vue

<script lang="ts" setup>
import { ref } from 'vue';

import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

// 【接口】接受传参字段
interface IProps {
  text: string;
}

// 初始化默认参数
const props = withDefaults(defineProps<IProps>(), {
  text: '',
});

const valueText = ref(props.text);

let mdStr = '';

const updateMarkdown = (md: string) => {

  mdStr = md;
}

let htmlStr = '';

const updateHtml = (html: string) => {

  htmlStr = html
}

const getMarkdown = () => {
  return mdStr;
}

const getHtml = () => {
  return htmlStr;
}

// 暴露函数
defineExpose({
  valueText,
  getMarkdown,
  getHtml,
});


</script>

<template>
  <md-editor v-model="valueText" @onChange="updateMarkdown" @onHtmlChanged="updateHtml" />
</template>

<style scoped>
</style>

提示

上传图片方法需要开发者自己去实现

使用

<script setup lang="ts">
import { ref, reactive } from 'vue';

import MdEditor from './MdEditor.vue';

const mdEditorRef = ref();

const text = ref('');

const getValue = () => {
  console.log(mdEditorRef.value);
}

</script>

<template>
  <p>================================</p>

  <button type="button" @click="getValue">获取数据</button>
  <MdEditor :text="text" ref="mdEditorRef"></MdEditor>

  <p>================================</p>


</template>

<style scoped>
</style>