这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件
安装支持vue3的版本:
# 使用 npm
npm i @kangc/v-md-editor@next -S
在vue3中注册:
import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
Prism,
});
const app = createApp(/*...*/);
app.use(VueMarkdownEditor);
使用:
<template>
<v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
export default {
data() {
return {
text: '',
};
},
};
</script>
效果:
==打印出的text
数据结构:==
预览组件:
在vue3中引用
import { createApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// highlightjs
import hljs from 'highlight.js';
VMdPreview.use(githubTheme, {
Hljs: hljs,
});
const app = createApp(/*...*/);
app.use(VMdPreview);
使用:
<template>
<v-md-preview :text="text"></v-md-preview>
</template>
<script>
export default {
data() {
return {
text: '',
};
},
};
</script>
效果:
==图片上传问题:==
上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。
示例:
<template>
<v-md-editor
v-model="text"
:disabled-menus="[]"
@upload-image="handleUploadImage"
height="500px"
/>
</template>
<script>
export default {
data() {
return {
text: '',
};
},
methods: {
handleUploadImage(event, insertImage, files) {
// 拿到 files 之后上传到文件服务器,然后向编辑框中插入对应的内容
console.log(files);
// 此处即为向编辑框中插入的内容,url即为图片上传后返回的链接
// 此处只做示例
insertImage({
url:
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
desc: '七龙珠',
// width: 'auto',
// height: 'auto',
});
},
},
};
</script>
效果:
v-md-editor官方网站