codevdesign 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,15 +9,12 @@
|
|
|
9
9
|
v-model="codeBudgetaire"
|
|
10
10
|
:items="codeBudgetairesProp"
|
|
11
11
|
v-bind="$attrs"
|
|
12
|
-
:label="label"
|
|
13
12
|
persistent-hint
|
|
14
13
|
variant="outlined"
|
|
15
14
|
hide-details="auto"
|
|
16
|
-
:error="!
|
|
17
|
-
:rules="
|
|
15
|
+
:error="!estValideComplet"
|
|
16
|
+
:rules="reglesVuetify"
|
|
18
17
|
:hint="afficherHint ? placeholder : ''"
|
|
19
|
-
:max-width="maxWidth || '100%'"
|
|
20
|
-
:min-width="minWidth || '100%'"
|
|
21
18
|
@blur="sauvegarder"
|
|
22
19
|
@keydown.enter="sauvegarder"
|
|
23
20
|
@keydown="caractereAutorises"
|
|
@@ -29,27 +26,30 @@
|
|
|
29
26
|
</template>
|
|
30
27
|
|
|
31
28
|
<script setup lang="ts">
|
|
32
|
-
import { ref, computed, onMounted, nextTick } from 'vue'
|
|
29
|
+
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
|
33
30
|
import type { VForm } from 'vuetify/components'
|
|
34
31
|
|
|
35
|
-
const emit = defineEmits
|
|
32
|
+
const emit = defineEmits<{
|
|
33
|
+
'update:modelValue': [string | null]
|
|
34
|
+
'update:codeBudgetairesProp': [string[]]
|
|
35
|
+
'update:valide': [boolean] // 👈 nouveau
|
|
36
|
+
}>()
|
|
36
37
|
|
|
37
38
|
const props = withDefaults(
|
|
38
39
|
defineProps<{
|
|
39
40
|
codeBudgetairesProp: string[]
|
|
40
41
|
modelValue: string | null
|
|
41
|
-
label: string
|
|
42
42
|
afficherHint?: boolean
|
|
43
43
|
regleMessageErreur: string
|
|
44
|
-
maxWidth?: string | number
|
|
45
|
-
minWidth?: string | number
|
|
46
44
|
format?: string
|
|
47
45
|
activerExtension?: boolean
|
|
46
|
+
reglesSupp?: ((v: string) => true | string)[]
|
|
48
47
|
}>(),
|
|
49
48
|
{
|
|
50
49
|
afficherHint: false,
|
|
51
50
|
format: '999-9-99999-999',
|
|
52
51
|
activerExtension: false,
|
|
52
|
+
reglesSupp: () => [],
|
|
53
53
|
},
|
|
54
54
|
)
|
|
55
55
|
|
|
@@ -60,6 +60,16 @@
|
|
|
60
60
|
const format = props.format
|
|
61
61
|
const activerExtension = props.activerExtension
|
|
62
62
|
|
|
63
|
+
onMounted(() => {
|
|
64
|
+
derniereValeurSauvegardee.value = codeBudgetaire.value
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
const placeholder = computed(() => {
|
|
68
|
+
const base = format.replace(/9/g, '0')
|
|
69
|
+
const extension = activerExtension ? '-XXX/XXX' : ''
|
|
70
|
+
return base + extension
|
|
71
|
+
})
|
|
72
|
+
|
|
63
73
|
const estValide = computed(() => {
|
|
64
74
|
const val = codeBudgetaire.value?.toUpperCase().trim() || ''
|
|
65
75
|
const base = val.slice(0, 15)
|
|
@@ -80,6 +90,23 @@
|
|
|
80
90
|
return alphanumAt.every(i => /^[A-Z0-9]$/i.test(extension[i]!))
|
|
81
91
|
})
|
|
82
92
|
|
|
93
|
+
// Règles Vuetify combinées (interne + supplémentaires)
|
|
94
|
+
const reglesVuetify = computed(() => [
|
|
95
|
+
// règle interne
|
|
96
|
+
() => (estValide.value ? true : props.regleMessageErreur),
|
|
97
|
+
|
|
98
|
+
// règles supplémentaires venant du parent
|
|
99
|
+
...props.reglesSupp.map(rule => {
|
|
100
|
+
return () => rule(codeBudgetaire.value) // on passe la valeur formatée
|
|
101
|
+
}),
|
|
102
|
+
])
|
|
103
|
+
|
|
104
|
+
// Validité globale du composant (interne + toutes les règles supp)
|
|
105
|
+
const estValideComplet = computed(() => {
|
|
106
|
+
if (!estValide.value) return false
|
|
107
|
+
return props.reglesSupp.every(rule => rule(codeBudgetaire.value) === true)
|
|
108
|
+
})
|
|
109
|
+
|
|
83
110
|
const caractereAutorises = (e: KeyboardEvent) => {
|
|
84
111
|
if (e.ctrlKey || e.metaKey) return
|
|
85
112
|
|
|
@@ -218,7 +245,9 @@
|
|
|
218
245
|
|
|
219
246
|
const sauvegarder = () => {
|
|
220
247
|
codeBudgetaire.value = formaterCodeBudgetaire(codeBudgetaire.value)
|
|
221
|
-
|
|
248
|
+
|
|
249
|
+
// on utilise la validité globale
|
|
250
|
+
if (!estValideComplet.value) return
|
|
222
251
|
if (codeBudgetaire.value === derniereValeurSauvegardee.value) return
|
|
223
252
|
|
|
224
253
|
const existe = props.codeBudgetairesProp.some(
|
|
@@ -240,18 +269,12 @@
|
|
|
240
269
|
const valeurFormatee = codeBudgetaire.value
|
|
241
270
|
const estDansListe = props.codeBudgetairesProp.includes(valeurFormatee)
|
|
242
271
|
|
|
243
|
-
if (estDansListe && valeurFormatee !== derniereValeurSauvegardee.value &&
|
|
272
|
+
if (estDansListe && valeurFormatee !== derniereValeurSauvegardee.value && estValideComplet.value) {
|
|
244
273
|
sauvegarder()
|
|
245
274
|
}
|
|
246
275
|
}
|
|
247
276
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
})
|
|
251
|
-
|
|
252
|
-
const placeholder = computed(() => {
|
|
253
|
-
const base = format.replace(/9/g, '0')
|
|
254
|
-
const extension = activerExtension ? '-XXX/XXX' : ''
|
|
255
|
-
return base + extension
|
|
277
|
+
watch(estValideComplet, value => {
|
|
278
|
+
emit('update:valide', value)
|
|
256
279
|
})
|
|
257
280
|
</script>
|
|
@@ -1,370 +1,328 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="editor">
|
|
3
|
-
<!-- Remount contrôlé pour TinyMCE -->
|
|
4
|
-
<Editor
|
|
5
|
-
v-bind="$attrs"
|
|
6
|
-
v-if="editorReady"
|
|
7
|
-
v-model="editorValue"
|
|
8
|
-
:init="initOptions"
|
|
9
|
-
:disabled="desactiver"
|
|
10
|
-
license-key="gpl"
|
|
11
|
-
@blur="onBlur"
|
|
12
|
-
@keydown="onUserActivity"
|
|
13
|
-
@change="onUserActivity"
|
|
14
|
-
/>
|
|
15
|
-
</div>
|
|
16
|
-
</template>
|
|
17
|
-
|
|
18
|
-
<script>
|
|
19
|
-
import Editor from '@tinymce/tinymce-vue'
|
|
20
|
-
import * as tinymce from 'tinymce/tinymce.js'
|
|
21
|
-
|
|
22
|
-
// Core/skins/thème
|
|
23
|
-
import 'tinymce/icons/default/icons.min.js'
|
|
24
|
-
import 'tinymce/themes/silver/theme.min.js'
|
|
25
|
-
import 'tinymce/models/dom/model.min.js'
|
|
26
|
-
import 'tinymce/skins/ui/oxide/skin.js'
|
|
27
|
-
import 'tinymce/skins/ui/oxide/content.js'
|
|
28
|
-
import 'tinymce/skins/content/default/content.js'
|
|
29
|
-
|
|
30
|
-
// Langue
|
|
31
|
-
import 'tinymce-i18n/langs7/fr_FR'
|
|
32
|
-
|
|
33
|
-
// Plugins
|
|
34
|
-
import 'tinymce/plugins/autoresize/plugin.min.js'
|
|
35
|
-
import 'tinymce/plugins/advlist/plugin.min.js'
|
|
36
|
-
import 'tinymce/plugins/lists/plugin.min.js'
|
|
37
|
-
import 'tinymce/plugins/link/plugin.min.js'
|
|
38
|
-
import 'tinymce/plugins/autolink/plugin.min.js'
|
|
39
|
-
import 'tinymce/plugins/fullscreen/plugin.min.js'
|
|
40
|
-
import 'tinymce/plugins/table/plugin.min.js'
|
|
41
|
-
import 'tinymce/plugins/image/plugin.min.js'
|
|
42
|
-
//import 'tinymce/plugins/emoticons/plugin.min.js'
|
|
43
|
-
//import 'tinymce/plugins/emoticons/js/emojis.min.js'
|
|
44
|
-
import 'tinymce/plugins/code/plugin.min.js'
|
|
45
|
-
|
|
46
|
-
const openLink = (url, target) => {
|
|
47
|
-
if (!url) return
|
|
48
|
-
if (import.meta.env.MODE !== 'development') {
|
|
49
|
-
if (target && target !== '_blank') {
|
|
50
|
-
document.location.href = url
|
|
51
|
-
return
|
|
52
|
-
}
|
|
53
|
-
window.open(url, target || '_blank', 'noopener,noreferrer')
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export default {
|
|
58
|
-
name: 'EditeurForm',
|
|
59
|
-
components: { Editor },
|
|
60
|
-
|
|
61
|
-
props: {
|
|
62
|
-
modelValue: { type: String, default: '' },
|
|
63
|
-
langue: { type: String, default: 'fr_FR' },
|
|
64
|
-
|
|
65
|
-
desactiver: { type: Boolean, default: false },
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
'
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
if (this.
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
.replace(
|
|
111
|
-
.replace(
|
|
112
|
-
.replace(
|
|
113
|
-
.
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
},
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
},
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
},
|
|
330
|
-
|
|
331
|
-
async _reinitEditor() {
|
|
332
|
-
if (this._reinitLock) return
|
|
333
|
-
this._reinitLock = true
|
|
334
|
-
try {
|
|
335
|
-
const ed = this._editor
|
|
336
|
-
if (ed && typeof ed.remove === 'function') {
|
|
337
|
-
try {
|
|
338
|
-
ed.remove()
|
|
339
|
-
} catch (e) {
|
|
340
|
-
console.warn('[Editeur] editor.remove erreur', e)
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
this._editor = null
|
|
344
|
-
|
|
345
|
-
// remount contrôlé
|
|
346
|
-
this.editorReady = false
|
|
347
|
-
await this.$nextTick()
|
|
348
|
-
this.editorReady = true
|
|
349
|
-
await this.$nextTick()
|
|
350
|
-
} finally {
|
|
351
|
-
this._reinitLock = false
|
|
352
|
-
}
|
|
353
|
-
},
|
|
354
|
-
},
|
|
355
|
-
|
|
356
|
-
beforeUnmount() {
|
|
357
|
-
try {
|
|
358
|
-
const ed = this._editor
|
|
359
|
-
if (ed && typeof ed.remove === 'function') ed.remove()
|
|
360
|
-
} catch {}
|
|
361
|
-
this._editor = null
|
|
362
|
-
},
|
|
363
|
-
}
|
|
364
|
-
</script>
|
|
365
|
-
|
|
366
|
-
<style scoped>
|
|
367
|
-
.editor a {
|
|
368
|
-
cursor: pointer !important;
|
|
369
|
-
}
|
|
370
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="editor">
|
|
3
|
+
<!-- Remount contrôlé pour TinyMCE -->
|
|
4
|
+
<Editor
|
|
5
|
+
v-bind="$attrs"
|
|
6
|
+
v-if="editorReady"
|
|
7
|
+
v-model="editorValue"
|
|
8
|
+
:init="initOptions"
|
|
9
|
+
:disabled="desactiver"
|
|
10
|
+
license-key="gpl"
|
|
11
|
+
@blur="onBlur"
|
|
12
|
+
@keydown="onUserActivity"
|
|
13
|
+
@change="onUserActivity"
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
import Editor from '@tinymce/tinymce-vue'
|
|
20
|
+
import * as tinymce from 'tinymce/tinymce.js'
|
|
21
|
+
|
|
22
|
+
// Core/skins/thème
|
|
23
|
+
import 'tinymce/icons/default/icons.min.js'
|
|
24
|
+
import 'tinymce/themes/silver/theme.min.js'
|
|
25
|
+
import 'tinymce/models/dom/model.min.js'
|
|
26
|
+
import 'tinymce/skins/ui/oxide/skin.js'
|
|
27
|
+
import 'tinymce/skins/ui/oxide/content.js'
|
|
28
|
+
import 'tinymce/skins/content/default/content.js'
|
|
29
|
+
|
|
30
|
+
// Langue
|
|
31
|
+
import 'tinymce-i18n/langs7/fr_FR'
|
|
32
|
+
|
|
33
|
+
// Plugins
|
|
34
|
+
import 'tinymce/plugins/autoresize/plugin.min.js'
|
|
35
|
+
import 'tinymce/plugins/advlist/plugin.min.js'
|
|
36
|
+
import 'tinymce/plugins/lists/plugin.min.js'
|
|
37
|
+
import 'tinymce/plugins/link/plugin.min.js'
|
|
38
|
+
import 'tinymce/plugins/autolink/plugin.min.js'
|
|
39
|
+
import 'tinymce/plugins/fullscreen/plugin.min.js'
|
|
40
|
+
import 'tinymce/plugins/table/plugin.min.js'
|
|
41
|
+
import 'tinymce/plugins/image/plugin.min.js'
|
|
42
|
+
//import 'tinymce/plugins/emoticons/plugin.min.js'
|
|
43
|
+
//import 'tinymce/plugins/emoticons/js/emojis.min.js'
|
|
44
|
+
import 'tinymce/plugins/code/plugin.min.js'
|
|
45
|
+
|
|
46
|
+
const openLink = (url, target) => {
|
|
47
|
+
if (!url) return
|
|
48
|
+
if (import.meta.env.MODE !== 'development') {
|
|
49
|
+
if (target && target !== '_blank') {
|
|
50
|
+
document.location.href = url
|
|
51
|
+
return
|
|
52
|
+
}
|
|
53
|
+
window.open(url, target || '_blank', 'noopener,noreferrer')
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default {
|
|
58
|
+
name: 'EditeurForm',
|
|
59
|
+
components: { Editor },
|
|
60
|
+
|
|
61
|
+
props: {
|
|
62
|
+
modelValue: { type: String, default: '' },
|
|
63
|
+
langue: { type: String, default: 'fr_FR' },
|
|
64
|
+
interdireRedimension: { type: Boolean, default: false },
|
|
65
|
+
desactiver: { type: Boolean, default: false },
|
|
66
|
+
plugins: {
|
|
67
|
+
type: [String, Array],
|
|
68
|
+
default: 'autoresize table image link fullscreen advlist lists autolink code',
|
|
69
|
+
},
|
|
70
|
+
interdireImage: { type: Boolean, default: false },
|
|
71
|
+
imageTailleMaximale: { type: Number, default: 5 }, // Mo
|
|
72
|
+
cacherBarreMenu: { type: Boolean, default: false },
|
|
73
|
+
cacherBarreOutils: { type: Boolean, default: false },
|
|
74
|
+
toolbar: {
|
|
75
|
+
type: [String, Array],
|
|
76
|
+
default:
|
|
77
|
+
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | ' +
|
|
78
|
+
'alignleft aligncenter alignright alignjustify | emoticons | bullist numlist | ' +
|
|
79
|
+
'image | link | outdent indent blockquote | undo redo | fullscreen | removeformat | table | code',
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
emits: ['update:modelValue', 'blur'],
|
|
84
|
+
|
|
85
|
+
data() {
|
|
86
|
+
return {
|
|
87
|
+
editorReady: true,
|
|
88
|
+
_editor: null,
|
|
89
|
+
editorValue: this.modelValue, // lié au v-model
|
|
90
|
+
_reinitPending: false,
|
|
91
|
+
_reinitLock: false,
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
|
|
95
|
+
computed: {
|
|
96
|
+
imageTailleMaxMo() {
|
|
97
|
+
const n = Number(this.imageTailleMaximale)
|
|
98
|
+
if (!Number.isFinite(n)) return 5
|
|
99
|
+
return Math.min(100, Math.max(0, n))
|
|
100
|
+
},
|
|
101
|
+
|
|
102
|
+
toolbarEffective() {
|
|
103
|
+
if (this.cacherBarreOutils) return false
|
|
104
|
+
const raw = Array.isArray(this.toolbar) ? this.toolbar.join(' | ') : this.toolbar
|
|
105
|
+
if (!this.interdireImage) return this._normalizeToolbar(raw)
|
|
106
|
+
|
|
107
|
+
const sansImage = raw
|
|
108
|
+
.replace(/\bimage\b/g, '')
|
|
109
|
+
.replace(/\s*\|\s*/g, ' | ')
|
|
110
|
+
.replace(/(\s*\|\s*){2,}/g, ' | ')
|
|
111
|
+
.replace(/^\s*\|\s*|\s*\|\s*$/g, '')
|
|
112
|
+
.replace(/\s{2,}/g, ' ')
|
|
113
|
+
.trim()
|
|
114
|
+
|
|
115
|
+
return this._normalizeToolbar(sansImage)
|
|
116
|
+
},
|
|
117
|
+
|
|
118
|
+
pluginsEffective() {
|
|
119
|
+
const list = (Array.isArray(this.plugins) ? this.plugins : this.plugins.split(/\s+/))
|
|
120
|
+
.map(p => p.trim())
|
|
121
|
+
.filter(Boolean)
|
|
122
|
+
const filtered = this.interdireImage ? list.filter(p => p !== 'image') : list
|
|
123
|
+
return filtered.join(' ')
|
|
124
|
+
},
|
|
125
|
+
|
|
126
|
+
initOptions() {
|
|
127
|
+
const opts = {
|
|
128
|
+
autolink: !this.desactiver,
|
|
129
|
+
autoresize: true,
|
|
130
|
+
automatic_uploads: !this.interdireImage,
|
|
131
|
+
branding: false,
|
|
132
|
+
browser_spellcheck: true,
|
|
133
|
+
content_css: 'default',
|
|
134
|
+
deprecation_warnings: false,
|
|
135
|
+
emoticons_database: 'emojis',
|
|
136
|
+
highlight_on_focus: false,
|
|
137
|
+
image_dimensions: !this.interdireImage,
|
|
138
|
+
language: this.langue === 'en' ? 'en_US' : 'fr_FR',
|
|
139
|
+
license_key: 'gpl',
|
|
140
|
+
menubar: !this.cacherBarreMenu,
|
|
141
|
+
object_resizing: !this.interdireImage,
|
|
142
|
+
paste_data_images: !this.interdireImage,
|
|
143
|
+
plugins: this.pluginsEffective,
|
|
144
|
+
promotion: false,
|
|
145
|
+
readonly: this.desactiver,
|
|
146
|
+
resize: !this.interdireRedimension,
|
|
147
|
+
resize_img_proportional: !this.interdireImage,
|
|
148
|
+
skin_url: 'default',
|
|
149
|
+
statusbar: this.cacherBarreOutils === false,
|
|
150
|
+
theme_advanced_resizing: true,
|
|
151
|
+
theme_advanced_resizing_use_cookie: false,
|
|
152
|
+
toolbar: this.toolbarEffective,
|
|
153
|
+
|
|
154
|
+
// --- File picker seulement si images permises ---
|
|
155
|
+
...(this.interdireImage ? {} : { file_picker_types: 'image' }),
|
|
156
|
+
|
|
157
|
+
setup: editor => {
|
|
158
|
+
this._editor = editor
|
|
159
|
+
|
|
160
|
+
editor.on('init', () => {
|
|
161
|
+
// init ok
|
|
162
|
+
})
|
|
163
|
+
|
|
164
|
+
// Intercepter clics liens
|
|
165
|
+
editor.on('click', e => {
|
|
166
|
+
const a = e.target?.closest?.('a')
|
|
167
|
+
if (!a) return
|
|
168
|
+
const href = a.getAttribute('href')
|
|
169
|
+
const target = a.getAttribute('target')
|
|
170
|
+
if (href) {
|
|
171
|
+
e.preventDefault()
|
|
172
|
+
openLink(href, target)
|
|
173
|
+
}
|
|
174
|
+
})
|
|
175
|
+
|
|
176
|
+
// ENTER sur un lien
|
|
177
|
+
editor.on('keydown', e => {
|
|
178
|
+
if (e.key !== 'Enter') return
|
|
179
|
+
const node = editor.selection?.getNode?.()
|
|
180
|
+
const a = node?.closest?.('a')
|
|
181
|
+
if (a) {
|
|
182
|
+
e.preventDefault()
|
|
183
|
+
openLink(a.getAttribute('href'), a.getAttribute('target'))
|
|
184
|
+
}
|
|
185
|
+
})
|
|
186
|
+
},
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
if (!this.interdireImage) {
|
|
190
|
+
opts.file_picker_callback = cb => {
|
|
191
|
+
const input = document.createElement('input')
|
|
192
|
+
input.type = 'file'
|
|
193
|
+
input.accept = 'image/*'
|
|
194
|
+
input.onchange = () => {
|
|
195
|
+
const file = input.files?.[0]
|
|
196
|
+
if (!file) return
|
|
197
|
+
|
|
198
|
+
const reader = new FileReader()
|
|
199
|
+
reader.onload = () => {
|
|
200
|
+
const base64 = String(reader.result).split(',')[1]
|
|
201
|
+
const editor = this._editor
|
|
202
|
+
const blobCache = editor?.editorUpload?.blobCache
|
|
203
|
+
if (!blobCache) return
|
|
204
|
+
|
|
205
|
+
const id = 'blobid' + Date.now()
|
|
206
|
+
const blobInfo = blobCache.create(id, file, base64)
|
|
207
|
+
const imageSize = blobInfo.blob().size / 1_000_000
|
|
208
|
+
if (imageSize > this.imageTailleMaxMo) {
|
|
209
|
+
alert('Fichier trop volumineux > ' + this.imageTailleMaxMo + ' Mo')
|
|
210
|
+
return
|
|
211
|
+
}
|
|
212
|
+
blobCache.add(blobInfo)
|
|
213
|
+
cb(blobInfo.blobUri(), { title: file.name })
|
|
214
|
+
}
|
|
215
|
+
reader.readAsDataURL(file)
|
|
216
|
+
}
|
|
217
|
+
input.click()
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
return opts
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
|
|
225
|
+
watch: {
|
|
226
|
+
/* v-model (parent -> enfant) */
|
|
227
|
+
modelValue(v) {
|
|
228
|
+
this.editorValue = v
|
|
229
|
+
},
|
|
230
|
+
|
|
231
|
+
/* v-model (enfant -> parent) */
|
|
232
|
+
editorValue(v) {
|
|
233
|
+
this.$emit('update:modelValue', v)
|
|
234
|
+
},
|
|
235
|
+
|
|
236
|
+
// Re-montage propre sur changements des props
|
|
237
|
+
interdireImage() {
|
|
238
|
+
this._scheduleReinit()
|
|
239
|
+
},
|
|
240
|
+
interdireRedimension() {
|
|
241
|
+
this._scheduleReinit()
|
|
242
|
+
},
|
|
243
|
+
toolbar() {
|
|
244
|
+
this._scheduleReinit()
|
|
245
|
+
},
|
|
246
|
+
imageTailleMaximale() {
|
|
247
|
+
this._scheduleReinit()
|
|
248
|
+
},
|
|
249
|
+
plugins() {
|
|
250
|
+
this._scheduleReinit()
|
|
251
|
+
},
|
|
252
|
+
cacherBarreOutils() {
|
|
253
|
+
this._scheduleReinit()
|
|
254
|
+
},
|
|
255
|
+
cacherBarreMenu() {
|
|
256
|
+
this._scheduleReinit()
|
|
257
|
+
},
|
|
258
|
+
},
|
|
259
|
+
|
|
260
|
+
methods: {
|
|
261
|
+
onBlur() {
|
|
262
|
+
if (!this.desactiver) this.$emit('blur')
|
|
263
|
+
},
|
|
264
|
+
onUserActivity() {},
|
|
265
|
+
insererAuCurseur(texte) {
|
|
266
|
+
const ed = this._editor
|
|
267
|
+
if (!ed) return
|
|
268
|
+
|
|
269
|
+
// Focus sur l'éditeur pour que TinyMCE sache où insérer
|
|
270
|
+
ed.focus()
|
|
271
|
+
|
|
272
|
+
// Insert au curseur (respecte le contexte HTML)
|
|
273
|
+
ed.insertContent(texte)
|
|
274
|
+
},
|
|
275
|
+
_normalizeToolbar(tb) {
|
|
276
|
+
const trimmed = (tb || '').trim()
|
|
277
|
+
return trimmed && trimmed !== '|' ? trimmed : 'undo redo'
|
|
278
|
+
},
|
|
279
|
+
|
|
280
|
+
_scheduleReinit() {
|
|
281
|
+
if (this._reinitPending) return
|
|
282
|
+
this._reinitPending = true
|
|
283
|
+
queueMicrotask(async () => {
|
|
284
|
+
this._reinitPending = false
|
|
285
|
+
await this._reinitEditor()
|
|
286
|
+
})
|
|
287
|
+
},
|
|
288
|
+
|
|
289
|
+
async _reinitEditor() {
|
|
290
|
+
if (this._reinitLock) return
|
|
291
|
+
this._reinitLock = true
|
|
292
|
+
try {
|
|
293
|
+
const ed = this._editor
|
|
294
|
+
if (ed && typeof ed.remove === 'function') {
|
|
295
|
+
try {
|
|
296
|
+
ed.remove()
|
|
297
|
+
} catch (e) {
|
|
298
|
+
console.warn('[Editeur] editor.remove erreur', e)
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
this._editor = null
|
|
302
|
+
|
|
303
|
+
// remount contrôlé
|
|
304
|
+
this.editorReady = false
|
|
305
|
+
await this.$nextTick()
|
|
306
|
+
this.editorReady = true
|
|
307
|
+
await this.$nextTick()
|
|
308
|
+
} finally {
|
|
309
|
+
this._reinitLock = false
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
},
|
|
313
|
+
|
|
314
|
+
beforeUnmount() {
|
|
315
|
+
try {
|
|
316
|
+
const ed = this._editor
|
|
317
|
+
if (ed && typeof ed.remove === 'function') ed.remove()
|
|
318
|
+
} catch {}
|
|
319
|
+
this._editor = null
|
|
320
|
+
},
|
|
321
|
+
}
|
|
322
|
+
</script>
|
|
323
|
+
|
|
324
|
+
<style scoped>
|
|
325
|
+
.editor a {
|
|
326
|
+
cursor: pointer !important;
|
|
327
|
+
}
|
|
328
|
+
</style>
|