Integration of TinyMCE to Vue 3

[libertey]

Hello, I'm creating a new app right now, using laravel 9 and vue 3 in combination with the Inertia package. Now I want to install TinyMCE, I'm using TinyMCE first time with vue. The Installation process and accessing via API key were absolutely clear to understand and worked pretty well. But now there comes the error, when I'm using the editor component and want to grab the content which is written in in the editor box, by v-model it's not showing up the updated content which is written down. I already looked up in the docs https://www.tiny.cloud/docs/tinymce/6/vue-ref/#form-input-bindings-v-model but I can't help me myself to find a solution. Is there any kind of a Hack on how to make this work?

I would use it like that :

<template>
    <div>
        {{message}}
    </div>
    <div id="test" @click="test">
        Hello
    </div>
    <div>
        <editor ref="editor"
                v-model="message"
                :api-key="$page.props.tinymce_api_key"
                @change="test"
                :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)

        const test = (e) => {
            console.log(e)
        }

        return {
            message, test, editor
        }
    }

}
</script>

The change function was just for some testing purposes...

Might it be that I have to use a getter and setter computed workflow to make this work? Would appreciate some tips and tricks to make that work!

I'm using:

• "vue": "^3.2.31"
• "@tinymce/tinymce-vue": "^4.0.7"

[exalate-issue-sync[bot]]

Ref: INT-2996

[libertey]

This issue can be closed, the v-model actually works to bring the data to the server. It just seems to be that the immediate render of the input has a kind of a lack, so build a workaround with getters and setters or with a watch hook and it will be fine.

[jasperf]

@libertey also trying to make tinyMCE work in Laravel 9 Jetstream and Inertia. How did you manage to use the v-model and routes to store tinyMCE data in the end? Would really appreciate a code example.

[libertey]

@libertey also trying to make tinyMCE work in Laravel 9 Jetstream and Inertia. How did you manage to use the v-model and routes to store tinyMCE data in the end? Would really appreciate a code example.

Hello, for me it just works fine, if you use the v-model in the <Editor> component.

<div>
                            <h2 class="font-black text-2xl mb-4">Post - Content:</h2>
                            <Editor :api-key="$page.props.tinymce_api_key" v-model="postForm.content" :plugins="plugins" :init="init"></Editor>
                        </div>

Also pretty standard init and plugins

const init = {
            height: 500,
            menubar: true,
            images_upload_url: route('tiny.images'),
        }

        const plugins = 'advlist autolink lists link image charmap print preview hr anchor ' +
            'wordcount visualblocks visualchars code fullscreen' +
            ' insertdatetime media nonbreaking save table directionality' +
            ' emoticons template paste textpattern codesample'

Using also the useForm hook from inertia-vue3 to store the data.

const postForm = useForm({
            title: null,
            content: null,
            slug: null,
            tags: tagsArraySelect,
            teaser: null,
        })

In the Backend I store it like a normal workflow

$post->content = $request->get('content');

I only had the problem to make the content visible inside the component if i submit the form the content is sent to the backend and i can store it. I don't know if that helped you.

[kevinwaxi]

Would you share a snippet of the laravel code that performs the upload function