Open ohuu opened 3 years ago
To give more context I'm using the composition API with Vue 2. The code for adding the images looks like this:
<mavon-editor
ref="md"
class="mavon-editor mb-4"
language="en"
v-model="post.content"
@imgAdd="imageAdded"
@imgDel="imageDeleted"
/>
// load post if editing a pre-existing post
onMounted(() => {
if (!isNew) {
indexedDb.posts
.filter(({ uuid }) => uuid === props.uuid)
.first()
.then(row => {
if (row) {
ignoreUpdates(() => {
post.setTo(row);
});
// upload images stored in indexedDb to mavon editor
nextTick(() => {
if (row.images) {
row.images.forEach(({ pos, file }) => {
md.value.$refs.toolbar_left.$imgAddByFilename(pos, file);
});
}
});
return;
}
});
}
});
The preview panel on the editor is open by default (I'm using the default options for the editor). As soon as I manually type in the editor the image is rendered in the preview panel but shows a broken link before.
Immediately after loading the image using the code above:
After manually editing the text in the left hand panel:
Interestingly this worked just fine when using Vue 2 without the composition API it seems to be related to the composition API.
Calling
$imgAddByFilename
works and the image is added to the editor however the preview panel is not updated so the image shows as a broken image.The preview panel immediately updates as soon as you type in the editor and the image shows.
Is there a way to force the editor to re-draw the preview panel or have it re-render when an image is uploaded programmatically?