<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>
