在使用mavon-editor时没有效果?
页面代码:
<template>
<div class="form-contain">
<a-form :form="formData" @submit="handleSubmit">
<a-form-item label="标题">
<a-input v-model="formData.title" />
</a-form-item>
<a-form-item label="描述">
<a-input v-model="formData.description" />
</a-form-item>
<a-form-item class="content" label="内容">
<mavon-editor class="mavon-editor" v-model="formData.content"></mavon-editor>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">
发布
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup lang="ts">
import MavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
const formData = {
title: '',
description: '',
content: '',
};
const handleSubmit = () => {
// 处理表单提交逻辑
};
</script>
<style>
.form-contain {
padding: 20px;
margin: 0 auto;
max-width: 1024px;
}
.mavon-editor {
width: 500px;
height: 500px;}
</style>
全局引入:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
createApp(App).use(Antd).use(router).use(mavonEditor).mount("#app");
package.json
"dependencies": {
"ant-design-vue": "^3.3.0-beta.4",
"async-validator": "^4.2.5",
"axios": "^1.3.4",
"core-js": "^3.8.3",
"highlight.js": "^11.7.0",
"lodash-es": "^4.17.21",
"marked": "^4.3.0",
"mavon-editor": "^2.10.4",
"moment": "^2.29.4",
"store": "^2.0.12",
"vue": "^3.2.13",
"vue-markdown": "^2.2.4",
"vue-router": "^4.0.3",
"vuex": "^4.1.0"
},
实际效果:
回复
1个回答
test
2024-07-06
在你的组件中,删除 import MavonEditor from 'mavon-editor'; 这一行。这样应该可以解决问题。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容