q-editor no blur ?

tntneo

Hi All. Is it correct to say that q-editor has no blur event?

I would love to use the same process I use with other input fields (blur event).
Is there any way with q-editor to know when editing stopped?
(by the way, would be also a great event for the other input components).

I know v-model is synced automatically. My issue is to be able to detect when modifications are done… or at least stopped for a few seconds.

Maybe you know another way I did not think of (with v-model maybe)…
Anyone?

genyded

Well… first off, q-editor is NOT an input element, it’s a contenteditable div element (like just about any other WYSIWYG editor out there). As such there is no blur event. It’s depends on what you want to do when “modifications are done” what (if anything) may work to meet those needs. Sometimes having the editor in a dialog with a save button will work. You could out it inside a card with action buttons that show up when changes are made. There may be some things you can do with custom directives, but again, it depends on what exactly you need. There are also some hacks with focusout events for some scenarios, but browser support varies and I would only recommend that as a last resort.

So, unless the html spec changes, a blur event is not an option. Given that, it really depends on what your needs are.

tntneo

Thank you for your help. Now I understand the discrepancy.
I was trying to do something too complicated anyway.
The Save button is the simple solution.

Ado20

You can easily accomplish blur on q-editor like this:

1.) Create reference:

<q-editor ref=“q-editor” …

2.) Add event listener in Vue ‘created’ hook:

created () {
this.$nextTick(() => {
const contenteditable = this.$refs[‘q-editor’].$el.querySelector(’[contenteditable]’)
contenteditable.addEventListener(‘blur’, () => {
// do what you want
})
})
}

tntneo

very interesting!
learn something everyday.
Thanks

genyded

Be careful trying to extend it though and if you do test it well. Browser support for ContentEditable is widely varies and likely part of the reason it does not have a native blur event to begin with.In theory it should work, but your mileage may vary.

Merrick

@Ado20 is using something like you have above suitable for accessing q-editor state?

My goal is to clone state from this.$refs['q-editor'].caret to the parent component. I have something like above working though I’m running into issues using the regular Vue lifecycle hooks as my q-editor is conditionally displayed (so this.$refs['q-editor'].caret is undefined for created/mounted).

Generally speaking, what’s the best practice for accessing a built-in child component’s state?

Edit: Maybe I was over thinking it using a listener, ended up using the following:

    injectContent () {
      if (this.$refs['q-editor'] && this.$refs['q-editor'].caret) {
        this.caretRange = this.$refs['q-editor'].caret.range
      }
      // insert content at caret position
    },

No More Posting New Topics!

q-editor no blur ?