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

stevecjor priority asked 10 months 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 10 months 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 priority commented 10 months 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 10 months 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: Priority
  • 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: Yes
  • Provided link: No