You can also use this to separate the different sections and further personalize the toolbar to your needs. In that case, you can set up a configuration object and pass it to your build's defaultConfig. To make it easily accessible, we’ll host it on Stackblitz with a link to the complete demo at the end of this article. We’ll use the React binding for Lexical in this example. Let's say you just want a very basic editor, and don't want to have the option to insert tables or images/media. The editor consists of a floating toolbar at the bottom, and the whole document is the editor viewport. Keep reading if you want to configure the toolbar plugins! The data I'm storing in body is in HTML, so if you want to display the output elsewhere you need to use dangerouslySetInnerHTML. That's all you need to have a simple working rich text editor using React and CKEditor 5. I'll go over how to set that up in another post! Here's what the toolbar looks like:Īs you can see, it gives you the option to insert images, but you have to set up your own adapter to do so. They have several different build options depending on what you're using it for, but in my case I used the Classic Build. In this course we will go through how to add rich text editing features (such as bold, underline, italic) to your React application, using an open source. Here's how I was able to set up a very basic rich text editor using CKEditor. You can use it freely for your personal or commercial projects. Quill is a free and open source API driven Rich Text Editor. For this tutorial, I picked react-quill, a Quill component for ReactJS. Some features I appreciate are keyboard shortcuts (like Ctrl+B/ CMD+B for bold or Ctrl+I/ CMD+I for italic) and auto-formatting. Currently, there are many Rich Text Editors available for ReactJS. Out of the box it is very user-friendly and has a nice, minimal design. In my case, CKEditor 5 ended up being the easiest to implement in my opinion. I did a lot of research trying to find a straightforward library that would let me achieve the above. I started writing up some posts of my own to document the experience, but quickly realized that the post content was not only plain-looking, but hard to read and unorganized. As mentioned in my previous post, I've been working on a blogging app.
0 Comments
Leave a Reply. |