采用全局引入，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