采用全局引入，markdown编辑器和富文本编辑器可以切换的效果，以下是源代码

• 安装

npm install mavon-editor --save   // markdown编辑器
npm install vue-quill-editor --save // 富文本编辑器

• 引包

//  markdown编辑器
import mavonEditor from 'mavon-editor'  //引入markdown编辑器
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
// 富文本编辑器
import VueQuillEditor from 'vue-quill-editor' //引入富文本编辑器
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor)

• 组件中使用

<template>
  <div class="extra-detail">
    <div class="upload-select">
      <el-upload action="#">
        <el-button size="small" type="primary" icon="el-icon-upload">上传附件</el-button>
      </el-upload>
      <el-select v-model="selectEditor" size="small">
        <el-option
          v-for="item in list"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        ></el-option>
      </el-select>
    </div>
    <el-divider></el-divider>
    <div class="upload-list">
      
    </div>
    <div class="editor">
      <!-- <mavon-editor :preview="false"/> -->
      <mavon-editor v-if="selectEditor == 0" :preview="false"/>
      <quill-editor v-else />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPreview:false,
      selectEditor: 0, //默认选择Markdown
      list: [
        { key: 0, label: "Markdown" },
        { key: 1, label: "富文本编辑器" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.upload-select {
  margin:0 20px 20px;
  display: flex;
  justify-content: space-between;
}
</style>

• 效果图

  
  
  image.png