Feature of the month - Paste features in CKEditor 5

The copy-paste feature is one of the most well-known mechanisms utilized in modern computers. It was conceived and introduced by the late Larry Tesler in the mid-seventies, but it originates from a much older technique of cut-and-paste where editors of newspaper layouts would cut and then glue a piece of the layout in a new position. Tesler worked in the field of human-computer interaction and was also one of the designers of the first word processor utilizing a graphical user interface called Gypsy. He developed the technology along with Tim Mott while working at Xerox and later helped popularize it while working for Apple and implementing the copy-paste mechanism (along with the clipboard that kept the copied data in the interim) in Apple’s Lisa Office System in 1983.

Modern world without the Ctrl/Cmd + C and Ctrl/Cmd + V idea is almost impossible to imagine. Just like in the days of paper layouts, users of word processors can simply select a part of the content and duplicate it or move into a new location with two keyboard clicks. Unlike its analog predecessor, however, the digital pasting offers much more and covers not only textual content, but basically everything else. The simplicity and efficiency of the feature are only topped by its usefulness and applicability for the most demanding professional, business users.

# Pasting rich content into CKEditor 5 from popular word processors

CKEditor 5, a modern, advanced WYSIWYG editor designed with extensibility and efficiency in mind, implements several features allowing users to paste the content into the document they work on from various sources. The editor provides unrivaled support for two of the most popular editing solutions, Microsoft Word and Google Docs. The first one is the industry leader in the commercial segment of the bundled word processors market while the latter is an accessible and free online tool, highly popular in both home and professional environments.

The paste from Word feature allows you to paste content from Microsoft Word and maintain the original structure and formatting. The paste from Google Docs feature allows you to paste content from Google Docs while also retaining the formatting. Both of these will let the user paste basic text styling, block alignment, heading levels, hyperlinks, lists, tables and images — all the features that make up rich content. This is especially valid for business users, where this unmatched interoperability with market-leading word-processing software is often a crucial point (and a difficult one) of content creation. Both paste features are supported through the paste from Office plugin which by default is enabled in all official CKEditor 5 builds.

CKEditor 5 will automatically detect Word and Google Docs content if the paste from Office plugin is enabled. These two word processors are explicitly supported, but the plugin also offers partial support for other text editing software like Pages or LibreOffice Writer which may also be a usability pinnacle for business users originating from diverse software backgrounds, helping their businesses get rid of the technical debt. The ability to match and integrate all previously utilized content creation solutions should always be considered as one of the important factors in the decision-making process.

CKEditor 5 supports pasting most of the available content types. It will properly recognize and accept numerous image formats; tables are fully supported, along with nested tables and table captions; both ordered and unordered lists will also be pasted correctly, retaining continuous numbering and indentation levels. It will keep the block formatting applied to the source content, like paragraph alignment and indentation. Hyperlinks will also be recreated in the editor, as seen in the screencast.

However, the full extent of accepted content is dependent on the editor configuration, which may vary in various implementations.

# Plain text paste

A completely opposite approach to text handling and copying is the paste as plain text feature. Unlike in the case of pasting rich content from different editors or websites and retaining all formatting, pictures and other elements, this feature will purposely strip all excess information, leaving just the text. This is especially important in a situation where you only need the textual content and do not really care about the formatting or graphic elements, for example when compiling an article with paragraphs taken from various sources (often with very different formatting). Pasting plain text makes it much easier to later format it in the desired way, and helps avoid a situation when compiling a document from different sources results in ugly content with inconsistent styling.

The plain text paste, also known as “pasting without formatting”, offers another useful solution for situations like these. When the Ctrl/Cmd + Shift + V keyboard shortcut is used during paste, the feature will clear all rich information from the pasted passage, paste it in place and make it inherit the formatting of the surrounding content. This way newly pasted passages will need no further work. It saves a lot of time and boosts effectiveness when editing, too. This the ultimate paste for jobs concentrating on the matter of the writing rather than the looks and would mostly be used at the creation stages, allowing to produce elegantly uniform content that can be later edited and proofread before formatting is applied. It is often the case of reviewed scientific articles or fiction stories intended for print. Business users should also never underestimate this ability while compiling parts of numerous official or legal documents, often created in different editors and formatted in a multitude of ways conforming to the companies’ multifarious standards.

It would also come in handy when the original rich content is causing problems during the paste (which might be for several reasons, like content not abiding the standards). In this case keeping just the text and reformatting it later as needed is a quick and convenient solution and can produce better, cleaner results.

Paste as plain text support is a part of the clipboard plugin and is included by default in all official CKEditor 5 builds.

# Drag and drop

Another special case is pasting content with the use of the drag and drop feature. Familiar to all users of graphic interfaces, this mechanism was first implemented on Apple Macintosh and Atari ST computers in the mid-eighties. Initially, it allowed for clicking and dragging around elements of the interface like files, but this functionality was later extended and is widely used in today’s operating systems with graphical interfaces like Microsoft Windows, Apple’s own macOS X or GNOME on Linux systems.

CKEditor 5 brings support for dragging and dropping both textual content and objects within the rich-text editor and from the outside, very much like opening an image file in Photoshop or pasting it into Word by simply dragging it from the computer’s desktop. Objects dragged would typically include plain text content, tables, images or multimedia files as well as widgets. The technology also allows for dropping HTML (if enabled).

Thanks to that, advanced content may be added to the editor, but also the feature itself may become a mechanism for user interaction, as shown in the screencast below. Drag and drop may, all the same, be used to move sections of the content around within the editor, just by selecting them and dragging, replacing the need to use keyboard shortcuts, which some of the users may find much more convenient and accessible. This could also become the ultimate power solution for commercial applications, allowing for a client input integration with a viable, interactive interface. From a business point of view, the variety and scalability of available CKEditor 5 features, as well as the possibility to combine those into completely new solutions, is yet unmatched on the online HTML editors market.

Drag and drop support is a part of the clipboard plugin and is included by default in all official CKEditor 5 builds.

# Content filtering

With CKEditor 5 you do not need to worry about pasting messy content from any sources. Thanks to the CKEditor 5 custom data model, only content that is specifically handled by the loaded rich-text editor features will be preserved.

This means that if you did not enable, for instance, font family and font size features, this sort of formatting will be automatically stripped off when you paste content from Microsoft Word and other sources (e.g. other websites). This is a powerful solution but needs scrutiny when implemented, as it affects all pasting mechanisms. When implementing a ready-to-use build or creating a custom build for our WYSIWYG editor you need to include all relevant plugins to ensure all formatting that needs to be retained would be retained.

# Always a good paste

Whatever it is you need to do, for yourself or for your company, CKEditor 5 features are here to help. Moving content around the document you work on with cutting and pasting, transferring it from previously created documents of different formats delivered by your business partner or adding a copy of something online to what you work on is easy, efficient and reliable. You can keep or drop the advanced formatting and rich content in a way currently unmatched on the WYSIWYG editor market. Whatever you need, the development approach behind CKEditor 5 Framework is aimed at bringing the most versatile tools to the table. With the scalable, granular take on flexible choice of features, the users get the ultimate editing solution for all purposes. Interested to hear more? Contact us to discuss your use case and we will be happy to tailor our offer to your needs!

You may also want to check out other Feature of the month blog posts, like the ones on how to boost productivity and speed in a business environment, employing the real-time collaboration features with comments and suggestion mode for discussions and team cooperation. Read how to structure your content better by employing lists, aid your editing with AI-driven spelling, grammar and punctuation checking or use word and character count to plan and execute your documents better.