mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 08:16:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: added MarkdownEditor.vue

Browse source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-14 19:33:29 +02:00
parent 84763e1d5f
commit 7944fd9f17
6 changed files with 116 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/routes/tools/MarkdownEditor.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<v-row justify="center" align="center">
<v-col cols="12" xl="5" lg="6" md="12">
<v-card>
<v-card-text>
<v-textarea v-model="markdown" auto-grow outlined label="Markdown editor"/>
<div class="text-center">
<v-btn @click="copy(markdown)">copy markdown</v-btn>
</div>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" xl="5" lg="6" md="12">
<v-card>
<v-card-text >
<div class="preview" v-html="html"></div>
<div class="text-center">
<v-divider />
<br>
<v-btn @click="copy(html)">copy html</v-btn>
</div>
</v-card-text>
</v-card>
</v-col>
</v-row>
</template>
<script>
// import {debounce} from "../../utils/helpers";
import marked from 'marked'
import DOMPurify from 'dompurify';
import {copyToClipboard} from "../../utils/helpers";
export default {
name: "MarkdownEditor",
data: () => ({
markdown: '# Hello, World!\nLorem ipsum **dolor** sit *amet*, consectetur adipisicing elit. A aspernatur commodi consequuntur distinctio dolore doloribus eaque earum est ipsum nobis numquam pariatur perspiciatis quasi quis, sed, sunt tempore tenetur, veniam!\n',
}),
methods: {
copy(text){
copyToClipboard(text)
this.$toast.success('Copied to clipboard.')
}
},
computed: {
html() {
return DOMPurify.sanitize(marked(this.markdown))
}
}
}
</script>
<style scoped lang="less">
::v-deep {
.preview {
padding: 20px;
h1{
margin-bottom: 15px;
}
code{
background-color: rgba(0, 0, 0, 0.3) !important;
box-shadow: none;
color: #9a9a9a;
font-weight: normal;
}
pre {
width: 100%;
code {
width: 100% !important;
padding: 10px;
}
}
}
}
</style>