提交代码

src/components/MyComponents/MarkdownEdit/index.vue

@@ -0,0 +1,71 @@
+<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>