Setting text for Editor / Quill component doesn't work

[Friis1978]

Describe the bug

When using the textEditor to edit text (loading a default text into the component, it isnt set in the editor window. But the updateValue emit is running, so the text should be there. I tried to use the 'onBeforeMounted' function to force the update, but no lock. Can someone please tell me if im doing something wrong, or there is a bug.

Here is my code:

`

        <span class="ql-formats">
          <button class="ql-list" value="ordered"></button>
          <button class="ql-list" value="bullet"></button>
          <button class="ql-indent" value="-1"></button>
          <button class="ql-indent" value="+1"></button>
          <button v-tooltip.bottom="'Link'" class="ql-link"></button>
        </span>
      </span>
    </template>
  </Editor>

`

`<script setup>
import { on } from "events";
import Editor from "primevue/editor";

const emit = defineEmits(["update:input","updateValue"]);

const { label, input, placeholder, error } = defineProps({
label: {
type: String,
},
input: {
type: String,
},
placeholder: {
type: String,
},
error: {
type: String,
},
});

const inputComputed = computed({
get: () => input,
set: (val) => {
emit("updateValue", val);
emit("update:input", val);
},
});

onBeforeMount(() => {
if (input) {
emit("updateValue", input);
emit("update:input", input);
}
});
</script>`

PrimeVue version

3.46.0

Vue version

3.x

Language

ES6

Build / Runtime

Nuxt

Browser(s)

Chrome Version 124.0.6367.119

Steps to reproduce the behavior

Use my code to test it, I use it in a form component like this:
<InputTextarea v-if="$formTypes.txtarea?.includes(key)" class="w-full" v-model:input="subform[key]" :inputType="subform[key]" :label="getLabel(key)" :placeholder="Vælg en ${getLabel(key)}" :error="showSubError(key) ? showSubError(key) : ''" @updateValue="(e) => updateSubValue(key, e)" />
And here is the InputTextarea component

`

{{ label }}

        <span class="ql-formats">
          <button class="ql-list" value="ordered"></button>
          <button class="ql-list" value="bullet"></button>
          <button class="ql-indent" value="-1"></button>
          <button class="ql-indent" value="+1"></button>
          <button v-tooltip.bottom="'Link'" class="ql-link"></button>
        </span>
      </span>
    </template>
  </Editor>
</div>
<span class="input-error">
  {{ error }}
</span>

<script setup> import { on } from "events"; import Editor from "primevue/editor"; const emit = defineEmits(["update:input","updateValue"]); const { label, input, placeholder, error } = defineProps({ label: { type: String, }, input: { type: String, }, placeholder: { type: String, }, error: { type: String, }, }); const inputComputed = computed({ get: () => input, set: (val) => { emit("updateValue", val); emit("update:input", val); }, }); onBeforeMount(() => { if (input) { emit("updateValue", input); emit("update:input", input); } }); </script>`

Expected behavior

The text in the textarea field should be updated, when text is prefilled.

[DendiRob]

Hello, I have met the same problem literally today, I have tried to set plain text, without fetching any data from the server, and nothing has changed

[nike4192]

my solution to the problem

<script setup lang="ts">
function initEditorValue({ instance }) {
  instance.setContents(instance.clipboard.convert({
    html: 'some html',
    // or
    // text: 'some text',
  }));
}
</script>

<template>
  <Editor @load="initEditorValue" />
</template>

package versions:

• vue@3.4.27
• primevue@3.52.0
• quill@2.0.0

[Friis1978]

@nike4192 that worked, thank you very much