vue-wysiwyg icon indicating copy to clipboard operation
vue-wysiwyg copied to clipboard

insert or edit raw html code

Open fbatiga opened this issue 4 years ago • 1 comments

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.

fbatiga avatar Nov 06 '20 00:11 fbatiga

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'); }, }, };

niharikasah avatar Sep 14 '21 08:09 niharikasah