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:

 <MDBWysiwyg ref="wysiwygRef" />

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.


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



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