-
Notifications
You must be signed in to change notification settings - Fork 20
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Broken example. Pressing enter navigates to top. #1
Comments
Thanks for the feedback, I tried here some things and saw that this happens only when pressing enter at the end of the line, can you just confirm if you're getting this same behavior or if it's in all cases of using the enter key? I'll check what's causing this behavior |
Sorry to jump in. This happens at the end and at the beginning of the line. Let us now if we can do a test, be happy to do so. I have it in a quasar installation where I installed this with |
Hey @edgar-koster, don't need to apologize, every help is welcome!!! |
Sure I'll let you know. I'm thinking it may be about a re-render I read about a few days ago. I will need to read more on it for that's new to me. I recall that sometime a preventDefault was added to the components to influence that. Maybe tat's a good starting direction |
Hey @WendellAdriel - I think the problem came from here: watch: {
value (newValue) {
this.editor.value = newValue
}
}, - because we don't want to change the value of the editor each time by using the value we got from the editor itself. - we only need to initialize the editor value - so now if we remove the <template>
<div id="app">
<jodit-vue v-model="content" />
</div>
</template>
<script>
import 'jodit/build/jodit.min.css'
import JoditVue from 'jodit-vue'
export default {
name: 'app',
components: { JoditVue },
data () {
return {
content: '<p>Jodit Vue</p>'
}
}
}
</script> - here is what we will get: # content this.value this.editor.value
| | |
|================>| | // v-model="content"
| | | // now: this.value="<p>JoditVue</p>"
| | |
| |================>| // mounted(){this.editor.value = this.value}
| | | // now: this.editor.value="<p>JoditVue</p>"
| | |
- here the editor will show the value of `content`
- jumping to the change event:
> this.editor.events.on('change', (newValue) => {
> this.$emit('input', newValue);
> })
- each time `this.editor.value` change,`content` will be changed **this is what we want**.
# content this.value this.editor.value
| | |
|<==================================| // this.$emit('input', newValue);
| | | // now: content=newValue
|================>| | // and: this.value=content
| | |
- the removed `watch` option come to play here by adding a new step because
it watch `this.value` and added it again to `this.editor.value` which cause the problem
let me know if i missed something and sorry for my poor English 😄 |
Hello @abdelaziz321, thanks for the feedback and also thanks for the PR. Here's an example without the |
Okay, doing this: if (this.editor.value !== newValue) {
this.editor.value = newValue
} now, we are changing
|
AWESOME!!! |
Example as well as library itself doesn't work well when pressing enter. Cursor navigates to top.
The text was updated successfully, but these errors were encountered: