chmln / vue-wysiwyg

A lightweight WYSIWYG HTML editor for Vue.js
https://chmln.github.io/vue-wysiwyg/
MIT License
555 stars 134 forks source link

insert or edit raw html code #134

Open fbatiga opened 3 years ago

fbatiga commented 3 years ago

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.

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