Comments (7)
The following snippet can be used as a temporary remedy:
editor.on('component:update', (component) => {
if (component.isInstanceOf('text')){
if (component && component.view && component.view.activeRte && component.view.activeRte.container && component.view.activeRte.container && component.view.activeRte.container.isDetached()){
component.view.activeRte.destroy();
}
}
});
from ckeditor.
Hey @pety-dc ,
I ran into the same issue. I tryed your solution but it threw an error, telling me, that isDetached is not a function.
The following code does the job in my case:
editor.on('component:update', (component) => {
if (component && component.isInstanceOf('text') && component.view && component.view.activeRte && component.view.activeRte.container && component.view.activeRte.container.isDetached()) {
component.view.activeRte.destroy();
}
});
Update: The isDetached() function is indispensable if you want to enter more text after making changes to the styles. An update to CKE v. 4.21 is strongly recommended. I had only taken care of the styles and did not notice that the CK is also destroyed when the component updates itself by text input.
from ckeditor.
Hey @michael-koeppe,
I don't know what version of CKEditor do you use.
The isDetached method was added in 4.13
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-isDetached
However, I didn't find it in CKEditor 5.
from ckeditor.
Hi @pety-dc,
i'm interested for a solution with this problem too.
I can reproduce the same issue with the release package from this grapesjs repository.
https://github.com/GrapesJS/grapesjs/tree/gh-pages
The version in the repository should be 4.6.2.
Would be this a solution to change the ckeditor version to the latest 4.21.0 ?
Many thanks in advance!
from ckeditor.
@plomi-net
TBH, I'm not sure what you wanted to ask. I'm trying to figure out.
AFAIK the issue that the GrapesJS canvas loses contact with the CKEditor instance when attributes of a text is edited on GrapesJS toolbar (which causes the text component to be redrawn on the canvas) is not dependent of CKeditor version.
Merely upgrading the CKEditor version does not fix this issue.
Having CKEditor version >=4.13 is only required for my suggested solution to this problem which uses the isDetached
method which was introduced in CKE in v4.13.
from ckeditor.
@pety-dc
Your suggested solution working fine.
i have updated the ckeditor version to use the ìsDetached` method.
I just say that the repository still contains an outdated version of ckeditor :)
from ckeditor.
editor.on('component:update', (component) => {
if (component && component.isInstanceOf('text') && component.view && component.view.activeRte && component.view.activeRte.container && component.view.activeRte.container.isDetached()) {
component.view.activeRte.destroy();
}
});
nice
from ckeditor.
Related Issues (20)
- Wrong position when open ckEditor. HOT 1
- CkEditor gets squeezed into small columns HOT 1
- How to remove the Links from toolbar for Anchor tags HOT 1
- TinyMCE + Froala New RTE for GrapesJS HOT 1
- Are there any known issues with using CKEditor 5?
- Components (link, paragraph) are recognized by GrapesJS in imported (setComponents) content
- CkEditor doesn't show Angular 14 HOT 1
- Could you please update the project to work with break-change from GrapesJS v0.20.1? HOT 1
- CKEditor @mentions not working HOT 3
- can not add custom dropdown in ckeditor HOT 2
- BUG: Toolbar of ckeditor components is not correctly refreshed
- The specified element mode is not supported on element: "a". HOT 3
- Toolbar align not working
- Does it support the option of customizing the tools toolbar? HOT 1
- typescript errors HOT 1
- How to enable or deactivate ckeditor for label component? HOT 1
- Anchor tag click to getting error and text not change
- RTE Toolbar cropped when close to canvas edge
- Add Custom Plugin through onBeforeLoad
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 ckeditor.