Comments (14)
I just encountered this issue today in Vue.js. I get a half- to full-second delay while typing, making for a frustrating staccato, stop-and-go experience. Is there a mitigation for this, perhaps not using CKEditor as a Vue component and just loading it as a pure native build?
from ckeditor5-vue.
Something like – isBusy
? :D If it solves some issues, then it sounds fine to me.
from ckeditor5-vue.
I can confirm it. I've just loaded 800 paragraphs as initial editor content and the editor became incredibly slow. It doesn't happen in CKEditor 5 without Vue integration.
@oleq, could you take a look at this one?
from ckeditor5-vue.
I confirm the issue. The culprit is this listener
Lines 101 to 106 in 1dc60f8
getData
that makes it slow. We should probably debounce it.
from ckeditor5-vue.
Dunno how it works in Vue, so sorry for a potentially stupid question – can the content be retrieved only on demand? Or does Vue implement a sort of two-way-binding so it can't?
BTW, I'd consider something like:
this.$emit( 'input', () => editor.getData(), evt, editor );
So, instead of passing data
directly in the input
event, we'd allow someone to retrieve it if needed. Although, if the consumer would actually read it on every input
that would change nothing.
Sorry again if I'm missing the point :D For two-way data binding debouncing seems reasonable.
from ckeditor5-vue.
@Reinmar I'm afraid it is impossible. 2-way data binding depends on actual data and there's no way to do things on demand. However, in the PR I managed to reduce the number of setData()
and getData()
calls with some caching, which significantly improved the performance.
In the second step, I'm gonna investigate a possibility of debouncing. Stay tuned.
from ckeditor5-vue.
I updated the PR with a debounced #input
event. Any feedback appreciated.
from ckeditor5-vue.
It would be nice to know if the editor is currently being "debounced" so a form submission can be delayed. Maybe setting a variable "typing" to true? Or at least setting a "maxWait"...
from ckeditor5-vue.
BTW, perhaps we could use the PendingActions
plugin? It's mentioned in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#autosave-feature and could help here too.
from ckeditor5-vue.
@awmartin could you open a new ticket (and cc me there)? I suppose that there must be an option to disable the two-way data binding or a smarter debounce mechanism (e.g. similar to the one used by autosave).
Also, a related ticket in CKEditor 5 itself: ckeditor/ckeditor5#5812.
from ckeditor5-vue.
Can anyone share some update on this please?
from ckeditor5-vue.
What about @ready="onReady" --> onReady(editor) { const data = editor.getData() } and skip the v-model? Possibly tying it to various events through editor.editing.view.document.on("event", (evt, data) => {})
from ckeditor5-vue.
I forgot to open another ticket. :-(
For context, I use a doc with about 6000 words and a lot of paragraphs and list items to test. The delay is typically 600-700ms when it appears. I think the performance of getData
is largely correlated to the number of top-level elements.
To bypass the v-model
pattern and remove the hesitation, I had to remove the change:data
event here and remove the modelValue
watcher. The performance returned, and I just handled saving documents manually. You don't get any Vue.js data binding though.
The other approach I tried was just increasing the debounce interval to 3000ms. It seemed to be okay except for a couple of hiccups, which I couldn't quite track down.
from ckeditor5-vue.
still very slow on document editor
from ckeditor5-vue.
Related Issues (20)
- ckeditor vue plugins css build error (with any plugin) HOT 4
- strikethrough and underline not listing as toolbar items
- Automated tests and coverage fails on Windows HOT 2
- CKFiner errors: CKEditorError: window.CKFinder is undefined & undefined (reading 'modal') HOT 1
- `emitDebouncedInputEvent` causes performance issue with long and complex content HOT 3
- Performance issues in processing content with multiple paragraphs containing multiple inline widgets HOT 2
- [VUE] Align the release process to the changes in ckeditor5-dev
- Custom build issues (object, instead of function) - Documentation issues? HOT 1
- v-model, events "input" or "update: model-value" do not work in source edit mode HOT 3
- Uncaught ReferenceError: global is not defined HOT 1
- Migrate to CircleCI in ckeditor/ckeditor5-vue
- Add link popup have wrong position in Modal with fixed mask HOT 3
- Uncaught SyntaxError when integrating a build from the online builder when using `npm add file:./ckeditor5` in Vue HOT 6
- Table captions is absent HOT 3
- Add support for multi-root editor
- How to set the height of the editor in Vue3? I set CSS, but none of it worked HOT 8
- vue3+ts+vite use custom build HOT 1
- Allow control of batchType options in model-value watcher
- Investigate warning
- Bug Report: Strikethrough Not Showing on Vue 3 with CKEditor
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 ckeditor5-vue.