forked from quasarframework/quasar
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathPasting.vue
More file actions
62 lines (58 loc) · 1.69 KB
/
Pasting.vue
File metadata and controls
62 lines (58 loc) · 1.69 KB
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
<template>
<div class="q-pa-md q-gutter-sm">
<form
autocorrect="off"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
>
<q-editor
ref="editorRef"
@paste="onPaste"
v-model="editor"
/>
</form>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const editorRef = ref(null)
return {
editorRef,
editor: ref(
'Try pasting some rich text here,' +
' such as from Discord or Webstorm.' +
'<br/>You can\'t paste images either!!!'
),
/**
* Capture the <CTL-V> paste event, only allow plain-text, no images.
* See: https://stackoverflow.com/a/28213320
*/
onPaste (evt) {
// Let inputs do their thing, so we don't break pasting of links.
if (evt.target.nodeName === 'INPUT') return
let text, onPasteStripFormattingIEPaste
evt.preventDefault()
evt.stopPropagation()
if (evt.originalEvent && evt.originalEvent.clipboardData.getData) {
text = evt.originalEvent.clipboardData.getData('text/plain')
editorRef.value.runCmd('insertText', text)
}
else if (evt.clipboardData && evt.clipboardData.getData) {
text = evt.clipboardData.getData('text/plain')
editorRef.value.runCmd('insertText', text)
}
else if (window.clipboardData && window.clipboardData.getData) {
if (!onPasteStripFormattingIEPaste) {
onPasteStripFormattingIEPaste = true
editorRef.value.runCmd('ms-pasteTextOnly', text)
}
onPasteStripFormattingIEPaste = false
}
}
}
}
}
</script>