How to get the content from the MDBWysiwyg Vue component?


Topic: How to get the content from the MDBWysiwyg Vue component?

stevecjor pro premium priority asked 2 years ago

Expected behavior This is regarding: mdb-vue-wysiwyg-editor, version: 1.0.0,

I would expect to be able to specify the component as: <MDBWysiwyg v-model=content /> so that I could get the current content from the text editor after the user has modified it.

Actual behavior MDBWysiwyg has the content as a slot. Therefore, the parent component does not see any changes to the text in the slot. In order to see the content, you have to do something like: document.getElementsByClassName('wysiwyg-content')[0]. Making assumptions about what's going on in the child component is a bad practice and fragile as the application code will break if this changes. Therefore, I think it should be provided as a v-model.

Resources (screenshots, code snippets etc.)


Mikołaj Smoleński staff answered 2 years ago

Hello @stevecjor,

There is a getCode method (described in the API tab), which returns the HTML code.

Here's an example:

<template>
 <MDBWysiwyg ref="wysiwygRef" />
</template>

then somewhere in script part get the code:

const wysiwyg = ref(wysiwygRef);
let code = "";
...
code = wysiwyg.value.getCode(); // after or inside mounted hook or in any custom method

Keep coding,  Mikołaj from MDB


stevecjor pro premium priority commented 2 years ago

The following is working for me.

In my component:

setup(props) {
    const wysiwygRef = ref(null);
    return { wysiwygRef };
},
methods: {
    someMethod() {
         const text = this.wysiwygRef.getCode(); // this works
    }
}

Mikołaj Smoleński staff commented 2 years ago

It's ok, but you're mixing Vue2 Options API with Vue3 Composition API. It would be bether to move method into the setup object as a function.

Keep coding, Mikołaj from MDB


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.8.0
  • Device: laptop
  • Browser: Chrome
  • OS: MacOS Monterey 12.0.1
  • Provided sample code: No
  • Provided link: No
Tags