- aggiornamenti guida RIS, FAQ
- Editor HTML aggiunto CSS e Script - Statistiche - CRISBalanceBar - Inizio Sync... (ma disattivato)
This commit is contained in:
Surya Paolo
@@ -2,3 +2,36 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
// Wrapper per stili custom dell'editor
|
||||
.cmyeditor.custom-styled {
|
||||
// Gli stili verranno iniettati dinamicamente
|
||||
|
||||
:deep(.q-editor__content) {
|
||||
// Override di default se necessario
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Stili specifici per contenuto custom
|
||||
[data-custom-editor] {
|
||||
:deep(.q-editor__content) {
|
||||
// Base styles che possono essere override
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.cmyeditor-wrapper.has-custom-styles {
|
||||
:deep(.q-editor__content) {
|
||||
// Force override di tutti gli stili di default
|
||||
all: unset;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 10rem;
|
||||
padding: 12px;
|
||||
outline: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { tools } from '@tools';
|
||||
import { CTitleBanner } from '../CTitleBanner';
|
||||
|
||||
import { defineComponent, onMounted, ref, toRef, watch } from 'vue';
|
||||
import { defineComponent, onMounted, onUnmounted, ref, toRef, watch } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
@@ -24,6 +24,11 @@ export default defineComponent({
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
customStyles: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
showButtons: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
@@ -62,6 +67,21 @@ export default defineComponent({
|
||||
const myvalue = ref('');
|
||||
const mycolor = ref('');
|
||||
|
||||
const editorId = ref(
|
||||
`editor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
||||
);
|
||||
const styleElement = ref<HTMLStyleElement | null>(null);
|
||||
|
||||
// Watch per applicare stili personalizzati
|
||||
watch(
|
||||
() => props.customStyles,
|
||||
(newStyles) => {
|
||||
if (newStyles && editorRef.value) {
|
||||
applyCustomStyles(newStyles);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const myfonts = ref({
|
||||
arial: 'Arial',
|
||||
arial_black: 'Arial Black',
|
||||
@@ -127,6 +147,45 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
// Funzione per applicare stili custom
|
||||
// ALTERNATIVA: Se vuoi applicare gli stili solo al contenuto dell'editor (più sicuro)
|
||||
|
||||
function applyCustomStyles(styles: string) {
|
||||
// console.log('Applying custom styles:', styles);
|
||||
|
||||
// Rimuovi style precedente
|
||||
if (styleElement.value && styleElement.value.parentNode) {
|
||||
styleElement.value.parentNode.removeChild(styleElement.value);
|
||||
}
|
||||
|
||||
if (!styles) return;
|
||||
|
||||
// Crea style element nel HEAD
|
||||
styleElement.value = document.createElement('style');
|
||||
styleElement.value.setAttribute('type', 'text/css');
|
||||
styleElement.value.setAttribute('data-editor-styles', editorId.value);
|
||||
|
||||
// CSS con selettori super specifici usando l'ID univoco
|
||||
const css = `
|
||||
[data-editor-id="${editorId.value}"] .q-editor__content {
|
||||
${styles}
|
||||
}
|
||||
|
||||
[data-editor-id="${editorId.value}"] .q-editor__content * {
|
||||
${styles}
|
||||
}
|
||||
|
||||
/* Selettori per classi custom nel contenuto */
|
||||
[data-editor-id="${editorId.value}"] .q-editor__content .prova1 {
|
||||
color: red !important;
|
||||
}
|
||||
`;
|
||||
|
||||
styleElement.value.textContent = css;
|
||||
document.head.appendChild(styleElement.value);
|
||||
|
||||
// console.log('Style injected:', css);
|
||||
}
|
||||
function getTextLength(html: string) {
|
||||
// Crea un elemento temporaneo per convertire HTML in testo
|
||||
const div = document.createElement('div');
|
||||
@@ -197,6 +256,12 @@ export default defineComponent({
|
||||
|
||||
characterCount.value = getTextLength(myvalue.value);
|
||||
|
||||
if (props.customStyles) {
|
||||
setTimeout(() => {
|
||||
applyCustomStyles(props.customStyles);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
if (props.startInCodeMode) {
|
||||
// Attiva modalità codice di default
|
||||
setTimeout(() => {
|
||||
@@ -231,6 +296,13 @@ export default defineComponent({
|
||||
|
||||
onMounted(mounted);
|
||||
|
||||
// Cleanup quando componente viene distrutto
|
||||
onUnmounted(() => {
|
||||
if (styleElement.value && styleElement.value.parentNode) {
|
||||
styleElement.value.parentNode.removeChild(styleElement.value);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
myfonts,
|
||||
toolbarcomp,
|
||||
@@ -248,6 +320,8 @@ export default defineComponent({
|
||||
showtools,
|
||||
characterCount,
|
||||
t,
|
||||
applyCustomStyles,
|
||||
editorId,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -15,9 +15,19 @@
|
||||
v-close-popup
|
||||
></q-btn>
|
||||
</q-toolbar>
|
||||
<q-card-section class="inset-shadow" style="padding: 4px !important">
|
||||
<CTitleBanner v-if="title" :title="title"></CTitleBanner>
|
||||
<form autocapitalize="off" autocomplete="off" spellcheck="false">
|
||||
<q-card-section
|
||||
class="inset-shadow"
|
||||
style="padding: 4px !important"
|
||||
>
|
||||
<CTitleBanner
|
||||
v-if="title"
|
||||
:title="title"
|
||||
></CTitleBanner>
|
||||
<form
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
<q-toggle
|
||||
v-if="!hideTools"
|
||||
v-model="showtools"
|
||||
@@ -25,34 +35,53 @@
|
||||
@click="tools.setCookie('showtools', showtools ? '1' : '0')"
|
||||
></q-toggle>
|
||||
<br />
|
||||
<q-btn v-if="showtools && !hideTools" rounded size="sm" color="primary">
|
||||
<q-icon name="colorize" class="cursor-pointer">
|
||||
<q-btn
|
||||
v-if="showtools && !hideTools"
|
||||
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-color
|
||||
v-model="mycolor"
|
||||
@change="setcolor"
|
||||
></q-color>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</q-btn>
|
||||
|
||||
<q-editor
|
||||
ref="editorRef"
|
||||
content-class="styled-content"
|
||||
toolbar-text-color="white"
|
||||
toolbar-toggle-color="yellow-8"
|
||||
toolbar-bg="primary"
|
||||
:readonly="!canModify"
|
||||
:toolbar="showtools && !hideTools ? toolbarcomp : []"
|
||||
:fonts="myfonts"
|
||||
@update:model-value="changeval"
|
||||
@paste="onPaste"
|
||||
@keyup.esc.stop="visueditor = false"
|
||||
@keyup.enter.stop
|
||||
v-model="myvalue"
|
||||
<div
|
||||
class="cmyeditor-wrapper"
|
||||
:data-editor-id="editorId"
|
||||
>
|
||||
</q-editor>
|
||||
<div v-if="maxlength" class="text-gray text-italic">Caratteri: {{ characterCount }} / {{ maxlength }}</div>
|
||||
<q-editor
|
||||
ref="editorRef"
|
||||
v-model="myvalue"
|
||||
:class="['cmyeditor', myclass]"
|
||||
@update:model-value="changeval"
|
||||
@paste.prevent="onPaste"
|
||||
:min-height="'10rem'"
|
||||
:max-height="'70vh'"
|
||||
:toolbar="toolbarcomp"
|
||||
:fonts="myfonts"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="maxlength"
|
||||
class="text-gray text-italic"
|
||||
>
|
||||
Caratteri: {{ characterCount }} / {{ maxlength }}
|
||||
</div>
|
||||
</form>
|
||||
</q-card-section>
|
||||
<q-card-actions v-if="showButtons" align="center">
|
||||
<q-card-actions
|
||||
v-if="showButtons"
|
||||
align="center"
|
||||
>
|
||||
<q-btn
|
||||
v-if="canModify"
|
||||
:label="$t('dialog.ok')"
|
||||
@@ -78,8 +107,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyEditor.ts">
|
||||
</script>
|
||||
<script lang="ts" src="./CMyEditor.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyEditor.scss';
|
||||
|
||||
Reference in New Issue
Block a user