inleft
2022-08-22 6461f5659505768e7a90594c3aab47f90d9ee213
commit | author | age
9c695b 1 <template>
I 2     <div class="myModal">
6461f5 3         <a-modal v-drag-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
e33959 4             :bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
9c695b 5             <div style="display: flex;">
74344a 6                 <a-textarea id="myInput" style="height: 750px;min-width: 50%" v-model="text"
0b0125 7                     @keydown.9.native.prevent="tabFunc" />
a71b64 8                 <div class="markdown-body article-detail" style="min-width: 50%;border: 1px solid #d9d9d9;">
0b0125 9                     <vue-markdown :source="text"></vue-markdown>
9c695b 10                 </div>
I 11             </div>
12         </a-modal>
13     </div>
14
15 </template>
16
17 <script>
18     import VueMarkdown from 'vue-markdown'
00e46d 19
I 20     const exp1 =
21         "### &ensp;&ensp;十里平湖 \r> ##### (卢照邻·唐)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)\n\n";
22     const exp2 = "### &ensp;&ensp;杂曲歌辞·春江曲 \r> ##### (郭元振·唐) \r* 江水春沉沉 \r* 上有双竹林 \r* 竹叶坏水色 \r* 郎亦坏人心 \r\n";
23
24     const exp3 = "\r> 「探清水河」\r引用化作 「上有竹林深 」 "
9c695b 25
cb7779 26     //import md5 from 'js-md5';
9c695b 27     export default {
I 28         components: {
29             VueMarkdown
30         },
31         data() {
32             return {
33                 visible: false,
00e46d 34                 text: exp1 + exp2 + exp3,
9c695b 35             }
I 36         },
37         methods: {
0b0125 38             tabFunc() {
I 39                 this.insertInputTxt('myInput', '\t')
40             },
41             insertInputTxt(id, insertTxt) {
74344a 42                 var elInput = document.getElementById(id);
0b0125 43                 var startPos = elInput.selectionStart
I 44                 var endPos = elInput.selectionEnd
45                 if (startPos === undefined || endPos === undefined) return
46                 var txt = elInput.value
47                 var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
48                 elInput.value = result
49                 elInput.focus()
50                 elInput.selectionStart = startPos + insertTxt.length
51                 elInput.selectionEnd = startPos + insertTxt.length
52             },
53
9c695b 54             getCalendarContainer(trigger) {
I 55                 return this.$refs.myModal;
56             },
57             showModal() {
58                 this.visible = true;
59             },
60             handleCancel(e) {
61                 this.visible = false;
62             },
63
64         },
65     }
66 </script>
67
68 <style>
69 </style>