Open fbatiga opened 3 years ago
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'); }, }, };
Hello,
Is there a way to inject html code in the editor via the UI ?
One use case would be for examples users that would like to copy paste a template, and then modify it in the editor.
thanks for your support.