How to switch from "disabled" to "enabled" for textarea in Vue
jsoulshine opened this issue · 8 comments
The vue component does not watch for config options in realtime.
I found there is an option to disable the editor once initialised.
https://alex-d.github.io/Trumbowyg/documentation/#disabled
For now, you can use this workaround.
https://jsfiddle.net/afydcequ/1/
- add a ref to component
<trumbowyg ref="editor" v-model="content"></trumbowyg- call the method via ref
this.$refs.editor.el.trumbowyg("disable") thank you!
Found out that trumbowyg does not respect new config options once initialised. We need to destroy existing instance and re-init editor with new options.
I am not sure the side effects of this and how many people would get benefit.
@ankurk91, I have been trying out vue-trumbowyg and I think it is wonderfull.
The only issue that I encounter now is when I disable the component like you said above, even if I put a v-if on it, there is still an element left:
<textarea data-v-ebb76330="" data-v-308c6a37="" class="" tabindex="-1" style=""></textarea>
How can I completly remove/destroy and initialized Trumbowyg?
Well, v-if should force the component to re-init.
I will try to reproduce it.
You can destroy the editor instance like
this.$refs.editor.el.trumbowyg("destroy")
Thank you for your effort, I also try to find out what the issue is by forking the project.
I tried the function like you provided, still doesn't work.
It seems like 'el' is always there.
Should be fixed in v3.5.0
Works really nicely thank you!