- 对
v-md-editor
的简易二次封装,新增导入、下载功能
npm i @kangc/v-md-editor -S
yarn add @kangc/v-md-editor
<template>
<v-md-editor
class="markdown"
v-model="content"
:mode="mode"
:tab-size="tabSize"
:toc-nav-position-right="tocNavPositionRight"
:default-show-toc="defaultShowToc"
:placeholder="placeholder"
:autofocus="autofocus"
:default-fullscreen="defaultFullscreen"
:include-level="includeLevel"
:left-toolbar="leftToolbar"
:right-toolbar="rightToolbar"
:toolbar-config="toolbarConfig"
:toolbar="toolbar"
:disabled-menus="disabledMenus"
:upload-image-config="uploadImageConfig"
:before-preview-change="beforePreviewChange"
:codemirror-config="codemirrorConfig"
:codemirror-style-reset="codemirrorStyleReset"
@upload-image="handleUploadImage"
@copy-code-success="handleCopyCodeSuccess"
@save="save"
height="100%"
></v-md-editor>
</template>
<script>
import readFile from "../utils/readfile.js";
import { saveLocal } from "../utils/download.js";
export default {
name: "MarkdownCom",
props: {
mode: {
type: String,
default: "editable",
},
},
data() {
return {
content: "",
tabSize: 2,
defaultShowToc: false,
tocNavPositionRight: false,
placeholder: "请使用markdown语法编写",
autofocus: false,
defaultFullscreen: false,
includeLevel: [1, 2, 3],
leftToolbar:
"h bold italic strikethrough quote | ul ol table hr | link image code | undo redo clear | save export import",
rightToolbar: "preview toc sync-scroll fullscreen",
toolbarConfig: {
"image-link": {
insertWithSize: false,
},
},
disabledMenus: [],
uploadImageConfig: { accept: "image/*" },
codemirrorConfig: {},
codemirrorStyleReset: true,
toolbar: {
export: {
title: "导出",
icon: "el-icon-download",
action(editor) {
const title =
(editor.titles.length && `${editor.titles?.[0]?.title}.md`) ||
"下载.md";
saveLocal(title, editor.text);
},
},
import: {
title: "导入",
icon: "el-icon-upload2",
action(editor) {
readFile()
.then((res) => {
console.log(editor);
editor.insert(() => {
return { text: res };
});
})
.catch(() => {
console.log("导入失败");
});
},
},
},
};
},
methods: {
beforePreviewChange(text, next) {
next();
},
save(text, html) {
console.log("保存", text, html);
},
handleUploadImage(event, insertImage, files) {
console.log(event, files);
insertImage({
url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg",
desc: "七龙珠",
width: "auto",
height: "auto",
});
},
handleCopyCodeSuccess(code) {},
},
};
</script>
<style lang="scss">
.markdown {
.v-md-editor__toolbar-item {
font-size: 20px !important;
}
}
</style>