insert or edit raw html code about vue-wysiwyg

[niharikasah]

I tried this workaround and it seems to work.

<wysiwyg
  v-model="value"
  v-model="editorContent"
  :class="{
    'editr--toolbarless': !showToolbar,
    'editr--wraptoolbar': wrapToolbar,
  }"
  :placeholder="placeholder"
  @change="onUpdate"
/>

data() {
return {
content: this.value,
editorContent: '',
};
},
watch: {
value() {
// on value change, update the content
this.content = this.getDocumentFromHTMLString(this.value);
this.editorContent = this.content.body.innerHTML;
},
},
mounted() {
this.content = this.value;
// Parse initial content to a dom document
this.content = this.getDocumentFromHTMLString(this.value);
// Set initial editor's content to only it's body innet html
this.editorContent = this.content.body.innerHTML;

this.$nextTick(() => {
  if (this.type) {
    const element = this.$el.querySelector('.editr--content');
    element.dataset.type = this.type;
  }
});

},

methods: {
onUpdate(value) {
this.$emit('input', value);
onUpdate(newValue) {
// Update the reference body innerHTML
this.content.body.innerHTML = newValue;
// Emmit the entire HTML
this.$emit('input', this.content.documentElement.outerHTML);
},
getDocumentFromHTMLString(string) {
const parser = new DOMParser();
return parser.parseFromString(string, 'text/html');
},
},
};
</script>