72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div class="markdown-wrap">
|
||
|
|
<!---->
|
||
|
|
<div id="markdown-box">
|
||
|
|
<strong v-html="modelValue"></strong>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top: 1vw">
|
||
|
|
<el-button type="primary" @click="saveEdit">确定详情信息</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import MKEditor from "@toast-ui/editor";
|
||
|
|
import "@toast-ui/editor/dist/toastui-editor.css";
|
||
|
|
import "@toast-ui/editor/dist/i18n/zh-cn.js";
|
||
|
|
|
||
|
|
import { COMPONENT_WIDTH } from "@/constant";
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
defineProps,
|
||
|
|
defineEmits,
|
||
|
|
defineExpose,
|
||
|
|
onMounted,
|
||
|
|
watch
|
||
|
|
} from "vue";
|
||
|
|
const props = defineProps({
|
||
|
|
//获取组件传值
|
||
|
|
placeholder: {
|
||
|
|
default: "请填写手机号",
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
modelValue: {
|
||
|
|
default: "",
|
||
|
|
type: String
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
default: "800px",
|
||
|
|
type: String
|
||
|
|
}
|
||
|
|
});
|
||
|
|
let mkEditor;
|
||
|
|
let el;
|
||
|
|
onMounted(() => {
|
||
|
|
el = document.querySelector("#markdown-box");
|
||
|
|
initEditor();
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["update:modelValue"]);
|
||
|
|
const initEditor = () => {
|
||
|
|
mkEditor = new MKEditor({
|
||
|
|
el,
|
||
|
|
height: "700px",
|
||
|
|
previewStyle: "vertical",
|
||
|
|
language: "zh-CN",
|
||
|
|
initiaValue:props.modelValue
|
||
|
|
});
|
||
|
|
mkEditor.getMarkdown();
|
||
|
|
};
|
||
|
|
const saveEdit = () => {
|
||
|
|
emits("update:modelValue", mkEditor.getHTML());
|
||
|
|
};
|
||
|
|
const onInput = (e) => {
|
||
|
|
emits("update:modelValue", e);
|
||
|
|
};
|
||
|
|
//回显
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.markdown-wrap {
|
||
|
|
}
|
||
|
|
</style>
|