src/components/group/MyPreviewModal.vue

@@ -1,11 +1,12 @@
<template>
   <div class="myModal">
      <a-modal v-model="visible" title="编辑预览" on-ok="handleOk" width="90%" :footer="null"
         :bodyStyle="{'overflow':'overlay','width': '100%','height': '100%'}">
      <a-modal v-drag-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
         :bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
         <div style="display: flex;">
            <a-textarea style="height: 750px;min-width: 50%" v-model="text" :rows="4" />
            <div class="markdown-body article-detail" style="min-width: 50%;">
               <vue-markdown  :source="text"></vue-markdown>
            <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
               @keydown.9.native.prevent="tabFunc" />
            <div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;">
               <vue-markdown :source="text"></vue-markdown>
            </div>
         </div>
      </a-modal>
@@ -16,7 +17,13 @@
<script>
   import VueMarkdown from 'vue-markdown'

   import md5 from 'js-md5';
   const exp1 =
      "### &ensp;&ensp;十里平湖 \r> ##### (卢照邻·唐)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)\n\n";
   const exp2 = "### &ensp;&ensp;杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";

   const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 "

   //import md5 from 'js-md5';
   export default {
      components: {
         VueMarkdown
@@ -24,20 +31,32 @@
      data() {
         return {
            visible: false,
            text: "### 长安古意   \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 ",
            text: exp1 + exp2 + exp3,
         }
      },
      methods: {
         tabFunc() {
            this.insertInputTxt('myInput', '\t')
         },
         insertInputTxt(id, insertTxt) {
            var elInput = document.getElementById(id);
            var startPos = elInput.selectionStart
            var endPos = elInput.selectionEnd
            if (startPos === undefined || endPos === undefined) return
            var txt = elInput.value
            var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
            elInput.value = result
            elInput.focus()
            elInput.selectionStart = startPos + insertTxt.length
            elInput.selectionEnd = startPos + insertTxt.length
         },

         getCalendarContainer(trigger) {
            return this.$refs.myModal;
         },
         showModal() {
            this.visible = true;
         },
         handleOk(e) {
            console.log(111);
         },

         handleCancel(e) {
            this.visible = false;
         },