1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="编辑预览" width="60%" :footer="null"
            :bodyStyle="{'overflow':'overlay','width': '100%','height': '700px'}">
            <div style="display: flex;">
                <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>
    </div>
 
</template>
 
<script>
    import VueMarkdown from 'vue-markdown'
 
    import md5 from 'js-md5';
    export default {
        components: {
            VueMarkdown
        },
        data() {
            return {
                visible: false,
                text: "### &ensp;&ensp;十里平湖 \r> ##### (卢照邻)  \r> 化自《长安古意》 \r* 十里平湖霜满天 \r* 寸寸青丝愁华年 \r* 对月形单望相护 \r* 只羡鸳鸯不羡仙 \r![](http://blog.inleft.com/photo/example.jpg)",
            }
        },
        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;
            },
            handleCancel(e) {
                this.visible = false;
            },
 
        },
    }
</script>
 
<style>
</style>