一、安装引入

1. 安装

npm i @qxintech/md-editor

2. 引入样式

//  /src/index.scss
@import '/node_modules/@qxintech/md-editor/dist/style.css';

3. 导入组件

//  /src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createMdEditor } from '@qxintech/md-editor';
import './index.scss'

const mdEditor = createMdEditor();

createApp(App).use(mdEditor).mount('#app')

二、组件使用

通过article来获取文本内容，readOnly来控制只读还是可编辑模式。

<template>
  <MdEditor v-model:content="article" :readOnly="readOnly"/>
  <button @click="save">保存</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  data() {
    return {
      // 文本内容
      article: '# 我的',
      // 是否只读
      readOnly: false
    }
  },
  watch: {
    article(val) {
      console.log(val);
    }
  },
  methods: {
    save() {
      console.log(this.article);
    }
  }
})
</script>