By putting in some effort, you can benefit from a stable, popular, and reliable solution set up to look and work exactly as you want. Drupal 10, for example, built CKEditor 5 into its core and enriched it with some typical CMS functionality like a media library through custom plugins. So how do you resolve some of these issues? Most editor components allow for some degree of customization that's still cheaper than writing a custom script to properly handle user content creation.ĬKEditor 5 uses a plugin-based architecture, which provides excellent customizability and extensibility. Also, some of your users prefer Markdown to HTML or WYSIWYG "magic".The feature set of the editor isn't what you need.You don't want to serve CDN scripts, and prefer to self-host.Your app is written in React/Angular/Vue, or something else. The UI doesn't match your design system.It's just a simple HTML website that misses the entire context of your app.But this simple example also uncovers some typical challenges faced by an integrator of an external framework. Yes, there are only three steps, and it's running. (Anna Tomanek, CC BY-SA 4.0) Advanced WYSIWYG editing Open it in your browser to test the WYSIWYG editor: This is some sample content for my new WYSIWYG editor. A full web page with an embedded CKEditor 5: create( document.querySelector( '#editor' ) )Īnd that's it. Load the editor build script (here, a so-called classic editor build is loaded from the CDN): Ĭall the ClassicEditor.create() method to display the editor. In an HTML page, add an element to serve as a placeholder for a CKEditor 5 instance: To get up and running, load the editor script from the CDN, and call its create() method to create the editor: Here are the basics of integrating CKEditor with a simple website. Running a simple editor in 3 steps with CKEditor 5 It's built on top of a robust collaboration-ready editing framework with model-view-controller (MVC) architecture, a custom data model, and virtual DOM. The latest version, CKEditor 5, is a modern, flexible, extensible, and customizable component written in pure TypeScript and JavaScript. It's backed by CKSource, a company of about 100 people who work, day in and day out, on improving the editor. Or choose CKEditorĬKEditor has been around for 20 years(!) as an open source project. Sure, there are some challenges you face when integrating a WYSIWYG editing component, but they're easy to resolve when you're using the popular open source CKEditor 5. So, similar to any external library, when you're choosing an editor, it's best to consider your use case so you can avoid a costly mistake and further migration in the future. The differences between them usually revolve around the feature set, UX, integrations with various technologies, extensibility, licensing, popularity, project health, and support options. There are plenty of rich text editing solutions on the market. It requires deep domain knowledge to do it well.Īssume you decide to integrate a ready-to-use editing component or framework. There's a valid reason why content editing functionality is often outsourced to an external library, even in big projects with considerable engineering teams. Creating and maintaining this takes time and effort that could otherwise be spent on developing your app. They want to see a familiar feature set and UX patterns. Content creation is such a widely accepted paradigm that users now expect it to work in your application similarly to anywhere else. WYSIWYG editing sounds easy.Įven when you're starting simple, requirements tend to grow over time. If your use case is simple and you don't need many features, building your own component may feel like a way to go.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |