ldc-loue/resources/js/components/bo/WordCounterComponent.vue

<template>
    <div class="wordCounter">
            <span class="words"><u>{{ __('Mots') }}</u>&nbsp;:&nbsp;<b>{{ words }}</b></span>
            <span class="chars"><u>{{ __('Caractères') }}</u>&nbsp;:&nbsp;<b>{{ chars }}</b></span>
    </div>
</template>

<script>
    import '../../vendor/ckeditor/build/ckeditor'
    // import { CKUploadAdaptater } from '../../back/CkUploadAdaptater'

    export default {
        mounted() {
            let data = JSON.parse(this.$attrs.json)
            this.id = data.id
        },
        data() {
            return {
                id: null,
                input: null,
                words: 0,
                chars: 0,
                emitTimer : null
            }
        },
        watch: {
            id() {
                if (!this.id) {
                    console.error('Missing ID')
                    return;
                }
                this.input = document.getElementById(this.id)
            },
            input() {
                this.input.addEventListener('input', (e) => this.updateValues(e.target.value))
                this.updateValues(this.input.value)
            }
        },
        methods: {
            updateValues(string) {
                let chars, words
                [words, chars] = this.calculateValues(string)
                this.words = words
                this.chars = chars
            },
            calculateValues(string) {
                const arr = string.split(' ')
                return [ arr.filter(word => word !== '').length, string.length ]
            }
        }
    }
</script>

<style lang="scss" scoped>
.wordCounter {
    display:inline-block;
    color: initial;
    border: 1px solid rgb(196, 196, 196);
    border-bottom: 0;
    background-color: #fafafa;
    position: relative;
    width: 100%;
    .words {
        position: relative;
        left: 2rem;
    }
    .chars {
        position: absolute;
        left: 9rem;
    }
}
</style>