Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

pt844931's avatar

tinyMCE v-model vue laravel 9

He, I'm trying to get my Tiny MCE editor to work, but there seem to be some problems with the combination of the v-model and the editor. so nothing is shown or the v-model variable is not updated on an input. Is there any kinda Hack you can do that is going to work?

My Component is like that

<template>
    <div v-html="message">
    </div>
    <div id="test">

    </div>
    <div>
        <editor ref="editor"
                v-model="message"
                :api-key="$page.props.tinymce_api_key"
                :init="{
                        plugins: [
                        'lists link image paste help wordcount'
                        ],
                        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
                        }"
                        />
    </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import {ref} from "vue";
export default {
    name: "FrontPage",
    components: {
        'editor': Editor,
    },
    setup() {
        let message
        let editor = ref(null)

        return {
            message, editor
        }
    }

}
</script>
0 likes
3 replies
pt844931's avatar

@OussamaMater Hey sorry for the late reply, I already found my mistake, it wasn't shown on the client side of the application but if I send the stuff to the server it worked great, if someone needs to display the tped content on the client side, use a computed or watch hook for vue and it should work! :)

But thanks for the answer.

1 like
OussamaMater's avatar

@pt844931 Happy you solved it! maybe mark the thread as solved by setting your answer as a "best answer" for future comers.

1 like

Please or to participate in this conversation.