Closed Reinmar closed 11 months ago
@Reinmar i asked this in one of the DUP issues, but wasn't sure if i should ask in here instead...
given that the current behaviour is so buggy (i'm having real bad issues with serialised machine data being injected into the editor) - what is the best way to disable it completely until official support is further along?
example of what is getting injected:
This will be enough to block any drop:
editor.editing.view.on( 'drop', ( evt, data ) => {
evt.stop();
data.preventDefault();
} );
But it also prevents image upload. You'd need to improve the listener to check whether there's something interesting there in the data
and let image upload handle those drop operations (by not stopping this event).
yes i should be able to detect my data very easily!
i'll try this out :)
@Reinmar this totally works - not 100% sure if the preventDefault()
is necessary, but evt.stop()
did what i needed
It's better to leave this preventDefault()
. What it does is that it block the native drop's effect which is the browser inserting the content into your editor. Such a random change to the editor's DOM needs to be applied to the model and normally it wouldn't because no one would handle it. But sometimes the typing feature may catch it and handle it. The typing feature works based on mutations and if some mutations meet certain characteristic they are picked up by typing's heuristics and transformed into model's operations (and, hence, preserved). If not, the model's re-rendered and native changes are reverted.
I described this mechanism here: https://github.com/ckeditor/ckeditor5/issues/748#issuecomment-356893226.
So, if you'll omit preventDefault()
plain-text-like mutations might be handled by the typing feature.
this has come back in the latest beta for ckeditor... i assume maybe the events changed?
editing.view.document
seems to help
I got two more requests about this on other channels recently. So π π
@Reinmar : Although my team has integrated CKeditor into our platform. Our operations team still needs to rely on Google Docs to Easily Rearrange Images. This is one important feature that is still not letting us get rid of Google docs and it leads to duplicated effort. Really looking forward to this feature. I hope it can be prioritized.
Thanks for feedback, @mechanicals.
The use cases for drag&drop are well known to us. But for now, no one reacted with π to this ticket. If you'd like to help us prioritizing tickets, please react to the original post, as mentioned in it. Thanks to that we can sort tickets by the number of reactions.
I have tried to implement this in my angular project ( i am using multiple editors in a single page ) which i achieved via below code. Don't know if its the right way.
CKEDITOR.inline('editor1', {
extraPlugins: 'hcard,sourcedialog,justify'
});
CKEDITOR.inline('editor2', {
extraPlugins: 'hcard,sourcedialog,justify'
});
What my problem is i tried use content from the my DB exact same text with html tags like in your drag and drop example as
---ts file----
emailTemp ="<span class="h-card" class="cke_widget_wrapper cke_widget_inline cke_widget_hcard cke_widget_wrapper_h-card cke_widget_selected" contenteditable="false"><span> rob maths </span></span>";
---html File---
<div class="editor" style="width: 25%;float: left;">
<div id="editor2" name="editor2" cols="10" rows="10" data-sample-short contenteditable="true" [innerHTML]="emailTemp">
</div>
</div>
But i am not getting the expected style for the hcard.. please have a look at the attachment
I'm building a commercial CMS, and not being able to rearrange blocks with drag-and-drop is currently the only thing that makes me worried about choosing CKEditor 5.
I thumb-upped the original post. Thanks for considering the feature!
@Reinmar Is it possible to implement this feature as plugin using current plugin API?
Any listenner about "drag start"? or "on drag"?
I'm waiting for this feature to come out.
Will it be made any time soon?
It will be awesome this feature come true.
This feature is really important!. could this feature be ready soon???
Guys, can you check out the froala editor Their website itself is a demo, How cool is that? It is super cool, very easy to make plugins, no need to go through a ton of framework documentation, almost all the features are ready to use. More over, you can paste html and it will be converted by the editor and vice-versa(you can view the source code and edit it like you want. It's ease of use is the main strength of the editor). Just my two cents after going through a painful week.
Hi!, this is an essential feature for a project that IΒ΄ve been working on, so do you think we could have this feature soon?
hi @Reinmar: which iteration will this be part of as now seems a lot of people are blocked on this solution?
Hello @Mgsy, any update on this ? Can we use https://github.com/ckeditor/ckeditor5/blob/e73554a8f95fa38e453a9cd2401ccb0e3d1d557c/packages/ckeditor5-widget/src/utils.js#L256 for the text insertion
And for the drag n drop maybe we can also use this by deleting drag content at original position and add it a final position ?
What do you think?
Maybe we can add it together ? or make it an open project ?
@Mgsy @Reinmar hello, any answer on my previous message? Thanks you
Hi @castroCrea! Hi all!
As for the general status: this is one of the most upvoted tickets. Normally, we add one or two such tickets to an iteration, so the math says that there should be a progress here within 2-3 months. But I don't want to promise anything, to be safe ;)
As for the drag&drop feature itself β I'm trying to understand how should we prioritise the following parts:
So, what are the priorities of (A+B), (C) and (D) to you? Could you write which are "must haves", "nice to haves" or "don't care" to you?
EDIT: A+B and part of C is currently in progress in #9128.
Thank for the response @Reinmar I think that :
If I can help ?!
C: must have ABD: don't care
C: definitely must have
C: must have D: super cool! Being able to move widgets solves a lot of problems I think.
Thank you, all :)!
I think it's perfectly clear now that C should be the first step.
A = Nice to have B = Nice to have C = Must have! D = π
For our application, rearranging text blocks is key, so we're primarily looking for: B or D
C and D for me too.
My current app design is a separate CKE component for each list item with an external drag handle, but would be nice if this was built right in. I'd love to hear what the current timeline looks like for this.
There's been an old proposal for d&d of widgets ("C") in #1023. IDK, though, if we can go with something like that if we'd also work on "D".
We're using CK Editor 4 at RocketLawyer.com to drag and drop sign blocks. If we upgrade to CK Editor 5 will we still be able to do this?
Not able to update from CK Editor 4 to 5
Please implement Drag and Drop support in CK Editor 5, due to this reason we are not able to use Comments, Real-time collaboration and other nice features introduced in CK5.
Agree with @logeshpaul pretty cool features split between CK Editor 4 & 5. Please bring drag and drop features in 5 as well.
From what I can see, Chrome doesn't allow you to drag a textual content. It creates a new selection every time I try to do that.
It looks like that's no longer the case in Chrome (applies both to dragging text in the editor and from outside). Long left-click is needed to start dragging.
- (D) Drag and drop of any block(s) in the editor.
So, what are the priorities of (A+B), (C) and (D) to you? Could you write which are "must haves", "nice to haves" or "don't care" to you?
D would be the most useful for us! @Reinmar are there any updates on the likelihood of this being implemented? At the moment we're weighing up this vs another option that is less functional but can add custom blocks and re-arrange out of the box.
Hi, any estimated date for this future?
Why would you ever push out a new product that removes an essential and existing feature? Being able to drag text like a real word editor was the #1 draw to CKEditor. Guess I'm downgrading to 4...
FYI we are working on A, B and C scenarios (with the assumption that dropping is allowed only in text positions or on the widgets) here: #9128
FYI: #9128 has been merged and will be included in the upcoming release (end of March) :tada:
Thank you for looking into this, this is greatly appreciated ! I'm really eager to test this !
We are excited to announce that we have released an experimental feature of blocks drag and drop in CKEditor 5. Please note that this feature is not yet fully developed or tested, and it may not be ready for production use.
Live demos are available in our docs: https://ckeditor.com/docs/ckeditor5/latest/features/pasting/drag-drop.html#drag-and-drop-of-content-blocks
https://github.com/ckeditor/ckeditor5/assets/9881379/081f6ebb-d467-4d21-9d26-bc0141c70256
β οΈ This is an experimental feature, it is available for users, developers, and enthusiasts, who want to test out new functionality and provide feedback to the product team. β οΈ
38.0.1+
version.DragDropExperimental
plugin from the clipboard package (available for all builds).DragDropBlockToolbar
to drag and drop with the icon.Let us know in comments, and in the reactions to this comment, what you think, and what enhancements would you like us to include in the stable release.
πΒ - This looks great, keep it going!
πΒ - I donβt like it, do something else.
πΒ - I want a drag handle for every editor type, e.g. classic, inline, etc. (something like: β Ώ)
β€οΈΒ - The drag handle should be visible on hovering over blocks, next to them (let us know in comments how would you render that in your editor setups, what editor types you use, etc.?)
πΒ - Make it lists aware (placing inside lists, sublists creation).
this is awesome, becoming the perfect UX for modern note-taking apps!
What a quick deliver!!
Exciting update! π We've improved drag-and-drop of blocks in v40.0.0, which has just been released. Now you can place blocks between other blocks more intuitively. For those using an editor with a balloon block toolbar, you can even initiate a drag from there. Play with it out in our docs!
Got more thoughts or feedback? There are still improvements we would like to make, follow and π the #15110, if you're interested.
Currently, we support:
If you'd try to select and drag&drop a content into the editor (either from the editor or from outside) you will experience a lot of strange issues or the editor will blow up.
The reason why it works just a "bit" is that we don't support it at all and it's the typing feature intercepting some fragments of dropped content thinking it's typed. It's all by coincidence and boils down to writing a support for drag&drop from scratch.
I'll be closing many tickets which were already reported as a DUP of this one, so let's make sure to check those TC once we'll come up with d&d implementation.
Scope
There are 3 functionalities to cover:
Dropping HTML/plain-text content from outside of the editor (other pages, the page in which the editor is embedded, external apps which provide HTML content in the clipboard) into the editor.
Drag and drop of textual content within the editor.
Drag and drop of block objects like images and tables within the editor.
This part is most complex because block objects are, in CKEditor 4 at least, handled completely by the editor. We use the magicline's engine to display possible locations where e.g. an image can be moved:
Drag and drop of any block content (e.g. paragraphs, list items, etc.) within the editor.
This is a cool addition on top of d&d of objects like images. Why not making all blocks draggable?
See my comment for more detailed description of these items.
When?
If you'd like to see d&d support in CKEditor 5, please add π to this comment.
Also: You can help us priorities the sub-features of drag&drop support.
UPDATE (1.03.2021): We're working on scenarios A+B and part of C. See https://github.com/ckeditor/ckeditor5/issues/9128 for updates.
UPDATE (Q3 2023): We are working on the block D&D: https://github.com/ckeditor/ckeditor5/issues/13933