Topic: How to get the content from the MDBWysiwyg Vue component?
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.)
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 3 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 3 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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