Comments (8)
Okay, doing this:
if (this.editor.value !== newValue) {
this.editor.value = newValue
}
now, we are changing this.editor.value
only if content
is different from the value of the editor.
example: https://codesandbox.io/s/l27n8z9l6l
from jodit-vue.
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 this.editor.value
when the component is mounted.
- so now if we remove the watch
option, considering this code:
<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
Example here: https://codesandbox.io/s/l27n8z9l6l
let me know if i missed something and sorry for my poor English
from jodit-vue.
Hello @abdelaziz321, thanks for the feedback and also thanks for the PR.
The watch
option was added in the last version to fix another issue, so I think that we can think about a solution that will fix both issues.
Here's an example without the watch
: https://codesandbox.io/s/jpvvvz0jq5
If we update the content from outside the editor, the value of the editor isn't updated, that's why I had to update the watch
from jodit-vue.
AWESOME!!!
Thank you so much @abdelaziz321!!!
I'll merge, put your user on the README file and release a new version!!!
from jodit-vue.
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
from jodit-vue.
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 npm install --save jodit-vu
. I have the component added to a page with import of the css and jodit-vue
.
from jodit-vue.
Hey @edgar-koster, don't need to apologize, every help is welcome!!!
If you can test it I'll be happy to check your feedback and if you come to any solution before I can check it, I would love to receive a PR on that!!! Thanks for the help!!!
from jodit-vue.
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
from jodit-vue.
Related Issues (20)
- Paste HTML not same as expected HOT 4
- TypeError: jodit__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor HOT 6
- [Vue warn]: Failed to mount component: template or render function not defined. HOT 4
- Browser getting Zoom on safari browser for Vue-NUXT. HOT 4
- Lag with amount of base64 images HOT 2
- How can I implement an on-change event on jodit-vue HOT 6
- Destruct method HOT 3
- Clearing cell in table from popup menu actions is not working HOT 5
- How to access jodit editor from external function ? HOT 4
- Jodit 3.6: Word/HTML insert dialog does not open HOT 8
- exports is not defined HOT 2
- Support for Custom Font List HOT 6
- is vue 3 support? HOT 2
- Library broken after latest Jodit export update HOT 5
- Support Content Security Policy (CSP) HOT 3
- Dark Mode Support HOT 3
- Vue 3 Question HOT 5
- Typescript typings missing HOT 9
- cannot select text modifiers HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jodit-vue.