ankurk91 / vue-trumbowyg

Vue.js component for Trumbowyg WYSIWYG editor :memo:
https://ankurk91.github.io/vue-trumbowyg/
MIT License
236 stars 35 forks source link

Request: Implement Keydown/Keyup event or similar - change event fires on loading of model #15

Closed barbedCoil closed 6 years ago

barbedCoil commented 6 years ago

I'm submitting a ... (check one with "x")

[X] Bug report => search github for a similar issue or PR before submitting
[X] Feature request
[ ] Other, please describe

Given behaviour below would it be possible to export a keydown/keyup event to I can track when the user actually changes the editor. I need to be able to prompt user to save their changes when there are actual changes and not just on load: see below

Tell about your platform

Current behavior When I load the component model it triggers the change event. Technically the change event should response to key events on edting but this is understandable

Expected behavior Would only trigger change event when user changes content of editor

Minimal reproduction of the problem with instructions Simply assign @tbw-change="logChange()", implement the function and log to console.

ankurk91 commented 6 years ago

@barbedCoil

You have two issues ->

change event on initial load

The component does not emit tbw-change on load. See jsfiddle. https://jsfiddle.net/p7xs2jkk/103/ I think your parent component is mutating v-model, that is causing the change event.

You want a way to track if user has modified the content since initial load

You can make a copy of original content in parent component and compare with v-model when user is trying to leave the screen. The component also emits various events that also may help to track what is happening inside. https://github.com/ankurk91/vue-trumbowyg/blob/98e892ed8e7114000ab0a0529cb65c9ebd6fd5d8/src/component.vue#L17

barbedCoil commented 6 years ago

I forked your jsfiddle to demonstrate what is going on: https://jsfiddle.net/barbedCoil/7dL6kyy6/1/ I updated the the version of vue I am using

My point was that the change event is firing without any user interaction at all - simply changing the model should not fire the change event since I already know at the point of loading the model that things have changed

Notice the button simply sets the model to a new value and the event is fired, in the mounted lifecycle event the same happens.

That is all I was trying to communicate. If you don't think it's a bug or something that should be looked at then that's not a problem, just thought I would show you what I am talking about

ankurk91 commented 6 years ago

I could not find any option to update editor content without having it to trigger the change event. https://alex-d.github.io/Trumbowyg/documentation/ The only way to update content is this but it cause change event - https://github.com/ankurk91/vue-trumbowyg/blob/98e892ed8e7114000ab0a0529cb65c9ebd6fd5d8/src/component.vue#L79

So it is not possible.

barbedCoil commented 6 years ago

I will try that - I only need a way to load content from the database without triggering the event so this may work. Thanks!