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