Unable to retrieve TinyMCE's content from a parent component

Question

I have asked the question on their Github but no answer so far so I'm trying my luck here.

I'm creating a form that contains TinyMCE as component ; my goal is to be able to use and reuse this component through the whole website as the main Wysiwyg. I import it, give it a v-model and I'm good to go.

So, it "works", as in, I can set a value via the v-model and TinyMCE will display it nicely. However, it looks like I'm on a write only mode, because I can't extract the current data from it.

I originally created an example for the Github issue, you can see it here so that you have a good idea of what I'm facing. There's a textarea under the TinyMCE component that has the same v-model, just try to play with it and see the behavior.

While everything works if I declare a v-model inside the TinyMCE component, what do I need to do get my value to the parent component?

Thanks in advance

Answer 1

You need to use v-model on the editor itself too or else it only receives the parent value but can't update it. However, you can't use the prop value for that because props can't be mutated .

Using a computed setter with v-model is a good solution here:

<editor
  api-key="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
  v-model="model"
></editor>

Leave the value prop as is and add the computed:

computed: {
  model: {
    get() {
      return this.value;
    },
    set(val) {
      this.$emit('input', val);
    }
  }
}

The computed setter returns the prop when getting, but emits rather than setting it.