other components... (2)
This commit is contained in:
Paolo Arena
4
src/components/CMyEditor/CMyEditor.scss
Executable file
4
src/components/CMyEditor/CMyEditor.scss
Executable file
@@ -0,0 +1,4 @@
|
||||
.myflex{
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
175
src/components/CMyEditor/CMyEditor.ts
Executable file
175
src/components/CMyEditor/CMyEditor.ts
Executable file
@@ -0,0 +1,175 @@
|
||||
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { CTitleBanner } from '../CTitleBanner'
|
||||
|
||||
import { defineComponent, ref, toRef } from 'vue'
|
||||
import { useQuasar } from 'quasar'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyEditor',
|
||||
components: { CTitleBanner },
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
myclass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
showButtons: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const $q = useQuasar()
|
||||
|
||||
const editor = ref(null)
|
||||
const myvalue = toRef(props, 'value')
|
||||
const mycolor = ref('')
|
||||
|
||||
const showeditor= ref(true)
|
||||
|
||||
const myfonts = ref({
|
||||
arial: 'Arial',
|
||||
arial_black: 'Arial Black',
|
||||
comic_sans: 'Comic Sans MS',
|
||||
courier_new: 'Courier New',
|
||||
impact: 'Impact',
|
||||
lucida_grande: 'Lucida Grande',
|
||||
times_new_roman: 'Times New Roman',
|
||||
verdana: 'Verdana'
|
||||
})
|
||||
|
||||
const toolbarcomp = ref([
|
||||
['left', 'center', 'right', 'justify'],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
[
|
||||
{
|
||||
label: $q.lang.editor.formatting,
|
||||
icon: $q.iconSet.editor.formatting,
|
||||
list: 'no-icons',
|
||||
options: [
|
||||
'p',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'code'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: $q.lang.editor.fontSize,
|
||||
icon: $q.iconSet.editor.fontSize,
|
||||
fixedLabel: true,
|
||||
fixedIcon: true,
|
||||
list: 'no-icons',
|
||||
options: [
|
||||
'size-1',
|
||||
'size-2',
|
||||
'size-3',
|
||||
'size-4',
|
||||
'size-5',
|
||||
'size-6',
|
||||
'size-7'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: $q.lang.editor.defaultFont,
|
||||
icon: $q.iconSet.editor.font,
|
||||
fixedIcon: true,
|
||||
list: 'no-icons',
|
||||
options: [
|
||||
'default_font',
|
||||
'arial',
|
||||
'arial_black',
|
||||
'comic_sans',
|
||||
'courier_new',
|
||||
'impact',
|
||||
'lucida_grande',
|
||||
'times_new_roman',
|
||||
'verdana'
|
||||
]
|
||||
},
|
||||
'removeFormat'
|
||||
],
|
||||
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
|
||||
|
||||
['undo', 'redo', 'viewsource'],
|
||||
])
|
||||
|
||||
function changeval(newval: any) {
|
||||
// console.log('changeval', newval)
|
||||
emit('update:value', newval)
|
||||
}
|
||||
|
||||
function annulla() {
|
||||
emit('annulla', true)
|
||||
}
|
||||
|
||||
function saveval() {
|
||||
// Converti i <b> in <strong>
|
||||
|
||||
myvalue.value = tools.convertiTagHTMLPerBOT(myvalue.value)
|
||||
|
||||
console.log('saveval', myvalue)
|
||||
emit('showandsave', myvalue)
|
||||
// emit('update:value', myvalue)
|
||||
showeditor.value = false
|
||||
}
|
||||
|
||||
function setcolor() {
|
||||
document.execCommand('foreColor', false, mycolor.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* Capture the <CTL-V> paste event, only allow plain-text, no images.
|
||||
*
|
||||
* see: https://stackoverflow.com/a/28213320
|
||||
*
|
||||
* @param {object} evt - array of files
|
||||
* @author Daniel Thompson-Yvetot
|
||||
* @license MIT
|
||||
*/
|
||||
function pasteCapture(evt: any) {
|
||||
// let text, onPasteStripFormattingIEPaste
|
||||
// evt.preventDefault()
|
||||
// if (evt.originalEvent && evt.originalEvent.clipboardData.getData) {
|
||||
// text = evt.originalEvent.clipboardData.getData('text/plain')
|
||||
// $refs.editor_ref.runCmd('insertText', text)
|
||||
// }
|
||||
// else if (evt.clipboardData && evt.clipboardData.getData) {
|
||||
// text = evt.clipboardData.getData('text/plain')
|
||||
// $refs.editor_ref.runCmd('insertText', text)
|
||||
// }
|
||||
// else if (window.clipboardData && window.clipboardData.getData) {
|
||||
// if (!onPasteStripFormattingIEPaste) {
|
||||
// onPasteStripFormattingIEPaste = true
|
||||
// $refs.editor_ref.runCmd('ms-pasteTextOnly', text)
|
||||
// }
|
||||
// onPasteStripFormattingIEPaste = false
|
||||
// }
|
||||
}
|
||||
|
||||
return {
|
||||
myfonts,
|
||||
toolbarcomp,
|
||||
editor,
|
||||
myvalue,
|
||||
mycolor,
|
||||
changeval,
|
||||
annulla,
|
||||
saveval,
|
||||
setcolor,
|
||||
pasteCapture,
|
||||
tools,
|
||||
}
|
||||
}
|
||||
})
|
||||
54
src/components/CMyEditor/CMyEditor.vue
Executable file
54
src/components/CMyEditor/CMyEditor.vue
Executable file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-card :style="`min-width: `+ tools.myheight_dialog() + `px;` ">
|
||||
<q-toolbar class="bg-primary text-white" style="min-height: 30px;">
|
||||
<q-toolbar-title>
|
||||
Editor
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup @click="showeditor=false"></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="inset-shadow" style="padding: 4px !important;">
|
||||
|
||||
<CTitleBanner :title="title"></CTitleBanner>
|
||||
<form
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
spellcheck="false">
|
||||
|
||||
<q-btn rounded size="sm" color="primary">
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-popup-proxy>
|
||||
<q-color v-model="mycolor" @change="setcolor"></q-color>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</q-btn>
|
||||
<q-editor
|
||||
ref="editor"
|
||||
toolbar-text-color="white"
|
||||
toolbar-toggle-color="yellow-8"
|
||||
toolbar-bg="primary"
|
||||
:toolbar="toolbarcomp"
|
||||
debounce="500"
|
||||
:fonts="myfonts"
|
||||
@input="changeval"
|
||||
@paste="evt => pasteCapture(evt)"
|
||||
@keyup.enter.stop
|
||||
v-model="myvalue">
|
||||
</q-editor>
|
||||
</form>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="showButtons" align="center">
|
||||
<q-btn flat :label="$t('dialog.ok')" color="primary" @click="saveval"></q-btn>
|
||||
<q-btn flat :label="$t('dialog.cancel')" color="primary" v-close-popup @click="annulla"></q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyEditor.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyEditor.scss';
|
||||
</style>
|
||||
1
src/components/CMyEditor/index.ts
Executable file
1
src/components/CMyEditor/index.ts
Executable file
@@ -0,0 +1 @@
|
||||
export {default as CMyEditor} from './CMyEditor.vue'
|
||||
Reference in New Issue
Block a user